/* ====== LOCAL INTER (offline, matches the reference screenshots) ====== */
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-SemiBold-Text.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
/* Display cut (24pt optical size) — tighter, for the big balance and amounts */
@font-face { font-family: 'Inter Display'; src: url('fonts/Inter-SemiBold-Display.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter Display'; src: url('fonts/Inter-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }
/* Custom numeric font built from the user's specimen (digits, $ , .) — Bold */
@font-face { font-family: 'WalletNum'; src: url('fonts/WalletNum-Bold.ttf?v=1791410307706') format('truetype'); font-weight: 700; font-style: normal; font-display: block; }
/* Numbers only */
@font-face { font-family: 'Num'; src: url('fonts/AvenirNext.ttf') format('truetype'); font-weight: 400 500; font-style: normal; font-display: swap; }
/* Demi (600) and Bold (700) slots — drop in AvenirNext-Demi.ttf / AvenirNext-Bold.ttf when available; until then the
   browser emboldens Medium (font-synthesis) which is close to the reference sample. */
@font-face { font-family: 'Num'; src: url('fonts/AvenirNext-Demi.ttf') format('truetype'), url('fonts/AvenirNext.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Num'; src: url('fonts/AvenirNext-Bold.ttf') format('truetype'), url('fonts/AvenirNext.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --blue: #0500FF;
  --blue-light: #3B99FC;
  --green: #2DC96F;
  --red: #EB5757;
  --bg: #ffffff;
  --text: #14171F;
  --gray: #7C8698;
  --light: #F4F5F7;
  --border: #E8EAEE;
  --safe-top: env(safe-area-inset-top, 48px);
  --safe-bottom: env(safe-area-inset-bottom, 34px);
}
html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  background: var(--bg); color: var(--text);
  font-feature-settings: 'cv11', 'ss01', 'calt';
  height: 100%; overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior: none;
}

/* Prevent bounce/rubber band on iOS */


/* PWA standalone mode adjustments */
@media all and (display-mode: standalone) {
  :root {
    --safe-top: env(safe-area-inset-top, 48px);
    --safe-bottom: env(safe-area-inset-bottom, 34px);
  }
}

/* Non-standalone (browser) — reduce safe areas */
@media not all and (display-mode: standalone) {
  :root {
    --safe-top: 0px;
    --safe-bottom: 0px;
  }
}

/* Small screens */
@media (max-height: 700px) {
  .total-balance { font-size: 28px; }
  .action-buttons { padding: 0 8px 8px; }
  .action-circle { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .action-btn span { font-size: 10px; }
  .eth-balance-large { font-size: 24px; }
  .search-bar { height: 32px; margin: 4px 14px 0; }
  .token-item { padding: 8px 6px; }
  .token-icon-wrap { width: 36px; height: 36px; }
  .token-icon-wrap svg, .token-icon-wrap img { width: 32px; height: 32px; }
  .token-symbol { font-size: 13px; }
  .token-bal-amount { font-size: 13px; }
}

/* Extra small screens (< 375px) */
@media (max-width: 375px) {
  .action-btn { min-width: 56px; gap: 6px; }
  .action-btn span { font-size: 11px; }
  .action-buttons { gap: 12px; padding: 0 14px 18px; }
}

/* Landscape orientation */
@media (max-height: 500px) {
  .action-buttons { gap: 12px; padding: 0 12px 14px; }
  .action-circle { width: 44px; height: 44px; }
  .action-btn span { font-size: 11px; }
}

/* Notch phones */
@supports (padding-top: env(safe-area-inset-top)) {
  .home-header { padding-top: calc(env(safe-area-inset-top, 0px) + 6px); }
  .detail-header { padding-top: calc(env(safe-area-inset-top, 0px) + 6px); }
  .send-header { padding-top: calc(env(safe-area-inset-top, 0px) + 6px); }
  .bottom-nav { padding-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - 14px)) !important; }
  .notification { top: calc(env(safe-area-inset-top, 0px) + 4px); }
  .faceid-gif-top { top: 0px; }
}

/* ====== SCREENS ====== */
.screen {
  position: fixed; inset: 0; display: none; flex-direction: column;
  background: var(--bg); z-index: 1;
}
/* Push navigation — compositor-only (transform + opacity), no filter/box-shadow repaints on iPhone */
.screen.slide-in, .screen.slide-out, .screen.send-open, .screen.send-closing, .screen.nav-prev, .screen.nav-next { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.screen.active { display: flex; }
.screen.slide-in {
  animation: slideIn 0.36s cubic-bezier(0.32, 0.72, 0, 1) forwards;
  z-index: 3;
}
.screen.slide-out {
  animation: slideOut 0.36s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
/* Dim layer on the screen going under — opacity only */
.screen::before {
  content: ''; position: absolute; inset: 0; background: #000; opacity: 0;
  pointer-events: none; z-index: 999;
}
.screen.slide-out::before { animation: dimIn 0.36s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
.screen.nav-next::before { animation: dimOut 0.36s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
/* Soft edge on the sliding card, drawn as a gradient instead of a box-shadow */
.screen.slide-in::after, .screen.nav-prev::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 100%; width: 14px;
  background: linear-gradient(to left, rgba(0,0,0,0.10), rgba(0,0,0,0)); pointer-events: none; opacity: 1;
}
@keyframes slideIn {
  from { transform: translate3d(100%,0,0); }
  to { transform: translate3d(0,0,0); }
}
@keyframes slideOut {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-30%,0,0); }
}
@keyframes dimIn { from { opacity: 0; } to { opacity: 0.14; } }
@keyframes dimOut { from { opacity: 0.14; } to { opacity: 0; } }
/* Back navigation */
.screen.nav-prev { animation: slideBackOut 0.36s cubic-bezier(0.32, 0.72, 0, 1) forwards; z-index: 3; }
.screen.nav-next { animation: slideBackIn 0.36s cubic-bezier(0.32, 0.72, 0, 1) forwards; }
@keyframes slideBackOut { from { transform: translate3d(0,0,0); } to { transform: translate3d(100%,0,0); } }
@keyframes slideBackIn { from { transform: translate3d(-30%,0,0); } to { transform: translate3d(0,0,0); } }
.screen.fade-in {
  animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ====== SPLASH ====== */
#screen-splash {
  background: #fff;
  z-index: 100;
}
.splash-logo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28vw;
  height: auto;
  object-fit: contain;
  animation: splashIn 0.6s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes splashIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.86); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* ====== FACE ID SCREEN ====== */
#screen-faceid {
  background: #ffffff;
  align-items: center; justify-content: center;
  padding: 0; margin: 0;
  z-index: 99;
  inset: 0;
}
.faceid-layout {
  display: flex; flex-direction: column; align-items: center;
  width: 100%; height: 100%;
  position: relative;
}
.faceid-gif-top {
  position: absolute;
  top: 0px;
  left: 50%; transform: translateX(-50%);
  transform-origin: center top;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0;
  transition: opacity 0.22s ease;
}
.faceid-gif-top.visible {
  opacity: 1;
  transform: translateX(-50%);
}
.faceid-shield-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.5s ease;
}
@keyframes iconFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.faceid-middle { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.faceid-anim-container {
  width: 207px; height: 174px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.faceid-gif { width: 207px; height: auto; object-fit: contain; border-radius: 0; }
.faceid-css { position: relative; width: 120px; height: 120px; }
.faceid-css svg { width: 120px; height: 120px; }
.faceid-corner {
  stroke: #0500FF;
  animation: cornerGlow 2s ease infinite;
}
@keyframes cornerGlow {
  0%, 100% { stroke: #0500FF; filter: none; }
  50% { stroke: #3B7BFF; filter: drop-shadow(0 0 4px rgba(59,123,255,0.5)); }
}
.faceid-feature { opacity: 0; animation: featureIn 0.5s ease 0.8s forwards; }
@keyframes featureIn { to { opacity: 1; } }
.scan-line {
  position: absolute; left: 12px; right: 12px; height: 2px;
  background: linear-gradient(90deg, transparent, #0500FF, transparent);
  top: 10px; border-radius: 1px;
  animation: scanDown 2s ease-in-out infinite;
}
@keyframes scanDown {
  0% { top: 12px; opacity: 0; }
  10% { opacity: 0.8; }
  90% { opacity: 0.8; }
  100% { top: 106px; opacity: 0; }
}
.faceid-label {
  font-size: 16px; color: var(--gray); font-weight: 500;
  transition: all 0.3s ease;
}
.faceid-label.success { color: var(--green); }
.faceid-bottom { margin-bottom: 20px; opacity: 0.15; }

/* Success animation */
.faceid-corner.success { stroke: var(--green); transition: stroke 0.4s ease; }

/* ====== HOME HEADER ====== */
.home-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-top) + 4px) 8px 6px;
  background: white;
  position: relative; z-index: 5;
  min-height: 56px;
}
.home-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: #14171F; }
.home-header .icon-btn { min-width: 48px; min-height: 48px; padding: 10px; }
.home-header .icon-btn svg { fill: #8E97A3; width: 26px; height: 26px; }
.icon-btn {
  background: none; border: none; padding: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; transition: background 0.15s;
  min-width: 44px; min-height: 44px;
}
.icon-btn:active { background: rgba(0,0,0,0.06); transform: scale(0.92); }
.icon-btn { transition: background 0.15s, transform 0.15s cubic-bezier(0.32, 0.72, 0, 1); }

/* ====== HOME CONTENT ====== */
.home-content {
  flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 12px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
  touch-action: pan-y;
}
#screen-home.active .search-bar,
#screen-home.active .wallet-selector,
#screen-home.active .total-balance,
#screen-home.active .action-buttons,
#screen-home.active .promo-carousel,
#screen-home.active .promo-dots,
#screen-home.active .tabs,
#screen-home.active .token-list,
#screen-home.active .manage-crypto {
  animation: riseIn 0.5s cubic-bezier(0.32, 0.72, 0, 1) both;
}
#screen-home.active .wallet-selector { animation-delay: 0.04s; }
#screen-home.active .total-balance { animation-delay: 0.08s; }
#screen-home.active .action-buttons { animation-delay: 0.12s; }
#screen-home.active .promo-carousel,
#screen-home.active .promo-dots { animation-delay: 0.16s; }
#screen-home.active .tabs { animation-delay: 0.2s; }
#screen-home.active .token-list { animation-delay: 0.24s; }
#screen-home.active .manage-crypto { animation-delay: 0.28s; }
@keyframes riseIn {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* Search bar */
.search-bar {
  display: flex; align-items: center; gap: 10px;
  margin: 10px 15px 0;
  height: 31px;
  border-radius: 16px;
  background: var(--light);
  padding: 0 13px;
  gap: 10px;
}
.search-bar svg { width: 14px; height: 14px; flex-shrink: 0; }
.search-placeholder {
  font-size: 14px; color: #B7BBC2; font-weight: 500;
}
.search-bar svg { width: 15px; height: 15px; stroke: #9BA3AE; stroke-width: 2.6; }

.wallet-selector {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 15px 0;
}
.wallet-selector-left {
  display: flex; align-items: center; gap: 6px;
}
.wallet-selector-left svg { flex-shrink: 0; }
.wallet-selector-right {
  display: flex; gap: 8px;
}
.wallet-mini-btn {
  width: 24px; height: 24px; border-radius: 5px;
  background: var(--light); display: grid; place-items: center;
  transition: background 0.15s;
}
.wallet-mini-btn:active { background: #E6E8EC; }
.wallet-name { font-size: 13.5px; color: #252A33; font-weight: 600; }
.wallet-selector-left { gap: 6px; }
.wallet-selector-left svg:first-child { width: 17px; height: 17px; }
.wallet-mini-btn svg { width: 13px; height: 13px; fill: #5B6372; }
.wallet-selector > div:last-child { gap: 13px; }
.total-balance {
  font-family: 'Avenir Next', 'Inter Display', 'Inter', sans-serif;
  font-size: 32px; font-weight: 600; padding: 4px 15px 18px;
  letter-spacing: -0.04em;
  font-feature-settings: 'pnum', 'lnum';
  font-variant-numeric: proportional-nums lining-nums;
  line-height: 1.1;
  color: #20252F;
  display: inline-block;
}

/* ====== ACTION BUTTONS ====== */
.action-buttons {
  display: flex; justify-content: center; gap: 18px;
  padding: 2px 16px 18px;
}
.action-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; cursor: pointer; min-width: 54px;
}
.action-btn span { font-size: 14.5px; color: #1B2130; font-weight: 500; text-align: center; line-height: 1.2; letter-spacing: -0.01em; }
.action-btn { gap: 12px; }
.action-circle svg { width: 22px; height: 22px; }
.action-circle {
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--light);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  min-width: 46px;
  min-height: 54px; min-width: 54px;
}
.action-btn:active .action-circle {
  background: #E6E8EC;
  transform: scale(0.9);
  transition-duration: 0.08s;
}

/* ====== PROMO BANNER (carousel) ====== */
.promo-carousel {
  position: relative; margin: 0 12px 0;
  overflow: hidden; border-radius: 14px;
}
.promo-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.promo-banner {
  min-width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 8px 10px 14px 8px; background: #F4F5F7; border-radius: 14px;
  min-height: 82px; box-sizing: border-box;
}
.promo-banner img { width: 68px !important; height: 68px !important; }
.promo-icon-wrap { flex-shrink: 0; width: 68px; height: 68px; display: grid; place-items: center; }
.promo-text { flex: 1; min-width: 0; }
.promo-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; color: #20252F; letter-spacing: -0.01em; }
.promo-link { font-size: 12.5px; color: #1B33FF; font-weight: 600; margin-top: 6px; }
.promo-close {
  background: none; border: none; font-size: 20px; line-height: 1;
  color: #8E97A3; cursor: pointer; padding: 6px; align-self: flex-start;
  width: 32px; height: 32px; display: grid; place-items: center;
}
.promo-dots { display: flex; justify-content: center; gap: 6px; padding: 0 0 0; margin-top: -12px; position: relative; z-index: 1; height: 12px; align-items: flex-start; }
.promo-dot {
  width: 17px; height: 3px; border-radius: 2px;
  background: #AEB4BD; transition: background 0.3s;
}
.promo-dot.active { background: #20252F; }

/* ====== TABS ====== */
.tabs {
  display: flex; padding: 0; gap: 0;
  border-bottom: none; margin: 14px 0 2px;
}
.tab {
  flex: 1; text-align: center;
  padding: 10px 0 14px; font-size: 15px; font-weight: 600;
  color: #8E97A3; cursor: pointer; position: relative;
  transition: color 0.2s; letter-spacing: -0.01em;
}
.tab.active { color: #20252F; }
.tab.active::after {
  content: ''; position: absolute; bottom: 4px;
  left: 50%; width: 23px; margin-left: -11.5px; height: 3px;
  background: #1B33FF; border-radius: 3px;
  animation: tabLine 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes tabLine { from { transform: scaleX(0.3); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }

/* ====== TOKEN LIST ====== */
.token-list { padding: 0 12px; }
.token-item {
  display: flex; align-items: center; padding: 8px 8px;
  cursor: pointer; transition: background 0.1s;
  border-radius: 14px; margin: 0 -8px;
  min-height: 52px;
}
.token-item { transition: background 0.15s, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1); }
.token-item:active { background: rgba(0,0,0,0.04); transform: scale(0.985); }
.token-icon-wrap {
  width: 38px; height: 38px; border-radius: 50%; margin-right: 12px;
  position: relative; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.token-icon-wrap svg, .token-icon-wrap img { width: 38px; height: 38px; border-radius: 50%; display: block; object-fit: cover; }
.chain-badge-wrap {
  position: absolute; bottom: -1px; right: -2px;
  width: 16px; height: 16px; border-radius: 50%;
  border: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: transparent;
}
.chain-badge-wrap svg, .chain-badge-wrap img { width: 16px; height: 16px; border-radius: 50%; display: block; }
.token-info { flex: 1; min-width: 0; }
.token-top-row { display: flex; align-items: center; gap: 6px; }
.token-symbol { font-weight: 600; font-size: 14.5px; letter-spacing: -0.2px; color: #20252F; }
.token-chain-label {
  font-size: 11.5px; color: #6B7482;
  background: #EEF0F3; padding: 2px 6px;
  border-radius: 5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.token-price-row { font-size: 12px; color: #8E97A3; margin-top: 3px; font-feature-settings: 'tnum'; }
.token-price-row .green { color: var(--green); font-weight: 600; }
.token-price-row .red { color: var(--red); font-weight: 600; }
.token-bal { text-align: right; flex-shrink: 0; }
.token-bal-amount { font-weight: 600; font-size: 14.5px; letter-spacing: -0.2px; font-feature-settings: 'tnum'; color: var(--text); }
.token-bal-usd { font-size: 12px; color: #8E97A3; margin-top: 0; line-height: 1.15; font-feature-settings: 'tnum'; }
.token-bal-amount { line-height: 1.15; }
.manage-crypto {
  text-align: center; color: var(--blue);
  font-size: 14px; font-weight: 600;
  padding: 12px 0 16px; cursor: pointer;
}

/* ====== BOTTOM NAV ====== */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px 0 0;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) - 14px);
  margin-bottom: 0;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  z-index: 10;
}
.nav-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; font-size: 10.5px; color: #9AA1AD; font-weight: 600;
  padding: 2px 0 4px; cursor: pointer;
  transition: color 0.15s;
  justify-content: center;
  letter-spacing: -0.1px;
}
.nav-item svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.nav-item:active svg { transform: scale(0.88); }
.nav-item:active { opacity: 0.75; }
.nav-item.active { color: #1a1aff; }

/* ====== DETAIL HEADER ====== */
.detail-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(var(--safe-top) + 4px) 12px 10px;
  background: white; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}
.detail-header.dark {
  background: #fff;
  border-bottom-color: var(--border);
}
.back-btn {
  background: none; border: none; padding: 8px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: background 0.15s;
  min-width: 44px; min-height: 44px;
}
.back-btn:active { background: rgba(0,0,0,0.06); transform: scale(0.92); }
.back-btn { transition: background 0.15s, transform 0.15s cubic-bezier(0.32, 0.72, 0, 1); }
.detail-title { text-align: center; flex: 1; }
.detail-name { font-size: 17px; font-weight: 700; letter-spacing: -0.3px; color: #20252F; }
.detail-sub { font-size: 12.5px; color: #8E97A3; margin-top: 2px; display: flex; justify-content: center; align-items: center; gap: 10px; letter-spacing: 0.02em; }
.detail-sep { width: 1px; height: 11px; background: #D5D9DF; }
#screen-eth .detail-header { border-bottom: none; }
.detail-actions { display: flex; gap: 4px; }

/* ====== ETH DETAIL ====== */
.eth-content {
  flex: 1; overflow-y: auto; padding-bottom: 30px;
  -webkit-overflow-scrolling: touch;
}
.eth-content > * { animation: riseIn 0.45s cubic-bezier(0.32, 0.72, 0, 1) both; }
.eth-content > :nth-child(2) { animation-delay: 0.04s; }
.eth-content > :nth-child(3) { animation-delay: 0.08s; }
.eth-content > :nth-child(4) { animation-delay: 0.12s; }
.eth-content > :nth-child(5) { animation-delay: 0.16s; }
.eth-content > :nth-child(6) { animation-delay: 0.2s; }
.eth-content > :nth-child(8) { animation-delay: 0.24s; }
.coin-top { position: relative; height: 70px; margin-top: 14px; }
.gas-badge {
  position: absolute; left: 16px; top: 0;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 14px; font-weight: 600; color: #20252F;
  font-feature-settings: 'tnum';
}
.eth-icon-large {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.eth-icon-large svg, .eth-icon-large img { width: 46px; height: 46px; border-radius: 50%; display: block; }
.eth-balance-large {
  text-align: center; font-size: 30px; font-weight: 700;
  letter-spacing: -0.5px; font-feature-settings: 'tnum';
  line-height: 1.2; color: #20252F; margin-top: 4px;
}
.eth-balance-usd {
  text-align: center; font-size: 15px; color: #8E97A3;
  margin: 6px 0 30px;
  line-height: 1.3;
}
.coin-actions { padding: 0 20px 20px; }
.earning-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 0 14px; padding: 18px 18px 18px 16px;
  background: #F4F5F7; border-radius: 12px;
  cursor: pointer; transition: background 0.15s;
}
.earning-banner:active { background: #E6E8EC; }
.earning-icon-wrap { flex-shrink: 0; width: 52px; height: 52px; display: grid; place-items: center; }
.earning-icon-wrap img { width: 52px; height: 52px; object-fit: contain; }
.earning-text { flex: 1; }
.earning-title { font-size: 15.5px; font-weight: 600; color: #20252F; }
.earning-sub { font-size: 13px; color: #8E97A3; margin-top: 3px; }
.coin-divider { height: 6px; background: #F4F5F7; margin: 20px 0 0; }
.divider { height: 1px; background: var(--border); margin: 12px 16px 0; }

/* ====== TRANSACTIONS ====== */
.tx-section { padding: 20px 14px 10px; }
.tx-note {
  text-align: center; font-size: 13.5px; color: #8E97A3;
  padding: 16px 14px; border: 1.5px dashed #E3E6EA;
  border-radius: 12px; margin-bottom: 4px; line-height: 1.45;
  background: #fff;
}
.tx-note a { color: #1515FF; text-decoration: none; font-weight: 600; }
.tx-date { font-size: 13px; color: #8E97A3; font-weight: 500; margin: 22px 0 8px; }
.tx-item { display: flex; align-items: center; padding: 10px 0; }
.tx-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-right: 14px; flex-shrink: 0; background: #F4F5F7;
}
.tx-icon.rx { background: #F4F5F7; }
.tx-icon.tx-out { background: #F4F5F7; }
.tx-icon svg { stroke: #8E97A3 !important; }
.tx-info { flex: 1; }
.tx-type { font-size: 15px; font-weight: 600; color: var(--text); }
.tx-addr { font-size: 12px; color: var(--gray); margin-top: 2px; }
.tx-amount { font-size: 14px; font-weight: 600; text-align: right; flex-shrink: 0; }
.tx-amount.green { color: var(--green); }
.eth-price-bar {
  margin: 8px 0 0; padding: 18px 14px 20px;
  border-top: 1px solid var(--border);
}
.eth-price-label { font-size: 13px; color: #8E97A3; font-weight: 500; }
.eth-price-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.eth-price-val { font-size: 16px; font-weight: 600; color: #20252F; font-feature-settings: 'tnum'; }
.eth-price-change { font-size: 15px; font-weight: 600; }
.eth-price-change.red { color: var(--red); }
.eth-price-caret { margin-left: auto; }
.green { color: var(--green); }

/* ====== SEND SHEET (design-doc match) ====== */
.send-overlay {
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
}
.send-overlay::before { content: none; }
.send-overlay.active {
  background: #000;
  transition: background 0.45s;
}
.send-overlay.active { pointer-events: auto; }
.send-overlay.hidden { display: none; }

.send-peek {
  position: absolute; left: 18px; right: 18px;
  top: calc(var(--safe-top) + 16px);
  height: 30px; background: #D9DBDF;
  border-radius: 14px 14px 0 0;
  transform: translateY(100vh);
  transition: transform 0.48s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 52;
}
.send-overlay.active .send-peek { transform: translateY(0); transition-delay: 0.04s; }

.send-sheet {
  position: absolute; left: 0; right: 0;
  top: calc(var(--safe-top) + 38px); bottom: 0;
  background: #fff;
  border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column;
  transform: translateY(100vh);
  transition: transform 0.48s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 52;
  box-shadow: 0 -6px 30px rgba(0,0,0,0.12);
}
.send-overlay.active .send-sheet { transform: translateY(0); }
.send-overlay.active .send-sheet-body > * {
  animation: riseIn 0.45s cubic-bezier(0.32, 0.72, 0, 1) 0.22s both;
}

/* Header */
.send-sheet-header {
  position: relative; height: 52px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.send-sheet-title { font-size: 18px; font-weight: 700; color: #20252F; letter-spacing: -0.2px; }
.send-sheet-close {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; cursor: pointer;
  padding: 9px; box-sizing: border-box; border-radius: 50%;
  transition: background 0.15s, transform 0.15s;
}
.send-sheet-close:active { background: rgba(0,0,0,0.06); transform: translateY(-50%) scale(0.9); }
.send-sheet-close span {
  position: absolute; left: 17px; top: 7px;
  width: 1.8px; height: 22px;
  background: #8E97A3; border-radius: 1px;
}
.send-sheet-close span:first-child { transform: rotate(45deg); }
.send-sheet-close span:last-child { transform: rotate(-45deg); }

/* Body */
.send-sheet-body {
  flex: 1; overflow-y: auto; padding: 22px 14px 0;
  -webkit-overflow-scrolling: touch;
}
.send-label {
  font-size: 13.5px; font-weight: 400; color: #6B7482;
  margin-bottom: 9px; letter-spacing: -0.02em;
  transform: scaleX(0.96); transform-origin: left center;
}
.send-box {
  height: 46px; box-sizing: border-box;
  border: 1.25px solid #C9CDD4; border-radius: 6px;
  background: #fff;
  display: flex; align-items: center;
  padding: 0 14px;
  gap: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.send-box:focus-within { border-color: #9AA1AD; box-shadow: 0 0 0 0.3px #9AA1AD; }
.send-box.filled { border-color: #9AA1AD; box-shadow: 0 0 0 0.3px #9AA1AD; }
.send-clear { display: flex; cursor: pointer; }
.send-clear[hidden] { display: none; }
.send-clear svg { width: 20px; height: 20px; }
.send-input {
  flex: 1; min-width: 0; border: none; background: none;
  font-size: 16px; font-weight: 500; color: #20252F;
  font-family: inherit; outline: none; caret-color: #1515FF;
}
.send-input::placeholder { color: #8A94A6; font-weight: 400; }
.send-box-actions {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0; margin-left: 10px;
}
.send-box-actions svg { cursor: pointer; display: block; }
.send-link {
  color: #1515FF; font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.send-ticker {
  color: #8A94A6; font-size: 15px; font-weight: 500;
}
.send-box-actions svg { width: 20px; height: 20px; }
.send-usd-hint {
  font-size: 13px; color: #8E97A3; margin-top: 18px;
}

/* Footer / Next */
.send-sheet-footer {
  padding: 10px 16px; flex-shrink: 0;
  padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
}
.send-next {
  height: 44px; border-radius: 22px;
  background: #EEF0F3; color: #8E97A3;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.send-next.enabled { background: #0500FF !important; color: #fff !important; }
.send-next { transition: background 0.25s, color 0.25s, transform 0.2s cubic-bezier(0.32, 0.72, 0, 1); }
.send-next:active { transform: scale(0.97); }
.send-next.enabled:active { background: #0D10D6; }

/* Home shrink animation (iOS sheet style) */
.screen.send-open,
.screen.send-closing { position: fixed; }
.screen.send-open { animation: none !important; }
body:not(.sheet-open) .screen.send-open, body:not(.sheet-open) .screen.send-closing { transform: none !important; border-radius: 0 !important; }
body.sheet-open .screen.send-open {
  transform: scale(0.92) translateY(calc(var(--safe-top) + 2px));
  transform-origin: center top;
  border-radius: 14px;
  transition: transform 0.48s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.48s;
  overflow: hidden;
  z-index: 51;
}
.screen.send-open::after,
.screen.send-closing::after {
  content: ''; position: absolute; inset: 0; z-index: 999;
  background: #000; pointer-events: none;
  opacity: 0; transition: opacity 0.48s ease;
}
body.sheet-open .screen.send-open::after { opacity: 0.22; }
body:not(.sheet-open) .screen.send-open::after, body:not(.sheet-open) .screen.send-closing::after { opacity: 0 !important; }
.screen.send-closing {
  transform: scale(1) translateY(0);
  transform-origin: center top;
  border-radius: 0;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), border-radius 0.42s;
  overflow: hidden;
  z-index: 51;
}
.screen.send-closing::after { opacity: 0; }
.send-field { margin-bottom: 24px; }
.send-field label {
  font-size: 13px; color: var(--gray); margin-bottom: 10px;
  display: block; font-weight: 500;
}
.send-input-row {
  display: flex; align-items: center; gap: 10px;
  background: #F5F5F5; border-radius: 14px; padding: 18px 16px;
  border: 1.5px solid var(--border);
  transition: border-color 0.2s, background 0.15s;
  min-height: 54px;
}
.send-input-row:focus-within { border-color: var(--blue); background: #FAFAFA; }
.send-input-row input {
  flex: 1; background: none; border: none; color: var(--text);
  font-size: 17px; outline: none; font-family: inherit;
  font-weight: 500;
}
.send-input-row input::placeholder { color: #A0A0A0; }
.send-action-btn {
  background: none; border: none; cursor: pointer;
  padding: 0; font-family: inherit;
}
.send-action-btn.blue {
  color: var(--blue); font-size: 16px; font-weight: 600;
  padding: 6px 4px;
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.send-action-btn.blue:active { opacity: 0.65; }
.send-action-btn.icon { display: flex; padding: 2px; }
.send-currency { color: var(--gray); font-size: 15px; font-weight: 500; }
.send-usd { font-size: 13px; color: var(--gray); margin-top: 8px; padding-left: 2px; }
.send-spacer { flex: 1; }
.btn-primary {
  width: 100%; padding: 12px 16px; border: none; border-radius: 22px;
  background: var(--blue); color: white;
  font-size: 16px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s, transform 0.1s;
  min-height: 44px;
  display: flex; align-items: center; justify-content: center;
}
.btn-primary:active { opacity: 0.9; transform: scale(0.97); }

/* ====== CONFIRM ====== */
#screen-confirm { background: #fff; }
.confirm-content {
  flex: 1; padding: 0 16px 16px; background: #fff;
  display: flex; flex-direction: column;
}
.confirm-back, .confirm-gear {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; border-radius: 50%;
}
.confirm-back { left: 6px; }
.confirm-gear { right: 10px; }
.confirm-back:active, .confirm-gear:active { background: rgba(0,0,0,0.06); }
.confirm-body { padding: 0 14px !important; }
.confirm-amount {
  text-align: center; font-size: 26px; font-weight: 700;
  color: #20252F; margin-top: 30px; letter-spacing: -0.6px;
  line-height: 1.1; font-feature-settings: 'tnum';
}
.confirm-usd {
  text-align: center; font-size: 14px; color: #8E97A3;
  margin: 6px 0 26px;
  line-height: 1.3;
}
.confirm-card {
  background: #F4F5F7; border-radius: 12px;
  padding: 0 14px; margin-bottom: 12px;
}
.confirm-asset { display: inline-flex; align-items: center; gap: 8px; }
.confirm-asset-icon { width: 15px; height: 15px; border-radius: 50%; display: inline-flex; overflow: hidden; background: #ECEFF0; }
.confirm-asset-icon svg, .confirm-asset-icon img { width: 15px; height: 15px; display: block; }
.sent-content > * { animation: riseIn 0.45s cubic-bezier(0.32, 0.72, 0, 1) both; }
.sent-content > :nth-child(2) { animation-delay: 0.05s; }
.sent-content > :nth-child(3) { animation-delay: 0.1s; }
.sent-content > :nth-child(4) { animation-delay: 0.15s; }
.sent-content > :nth-child(6) { animation-delay: 0.2s; }
.confirm-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 12px 0; border-bottom: none; font-size: 13px;
  gap: 12px;
}
.confirm-card { padding-top: 5px; padding-bottom: 5px; }
.confirm-row.last { border-bottom: none; }
.confirm-label { color: #8E97A3; font-size: 13px; flex-shrink: 0; display: inline-flex; align-items: center; line-height: 1.4; }
.confirm-value {
  color: #20252F; text-align: right; font-size: 13px; font-weight: 500;
  max-width: 70%; word-break: break-all; line-height: 1.4; font-feature-settings: 'tnum';
}
.confirm-value.bold { font-weight: 600; color: #20252F; font-size: 13px; }
.confirm-sub { color: #8E97A3; font-size: 12px; }
.confirm-spacer { flex: 1; }
.inline-icon {
  display: inline-block; width: 16px; height: 16px;
  border-radius: 50%; vertical-align: middle; margin-right: 4px;
}
.eth-mini { background: #627EEA; }
.status-ok { color: var(--green); font-weight: 600; }
.status-pending { color: #E5A400; font-weight: 600; }

/* ====== PROCESSING (bottom sheet overlay) ====== */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.overlay.hidden { display: none; }
.overlay-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  animation: backdropIn 0.3s ease forwards;
}
@keyframes backdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.bottom-sheet {
  position: relative; z-index: 51;
  background: #fff; border-radius: 28px 28px 0 0;
  padding: 18px 20px calc(var(--safe-bottom) + 16px);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.08);
  max-height: 56vh;
  animation: sheetUp 0.48s cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes sheetUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.sheet-content > * { animation: riseIn 0.45s cubic-bezier(0.32, 0.72, 0, 1) both; }
.sheet-content > :nth-child(2) { animation-delay: 0.08s; }
.sheet-content > :nth-child(3) { animation-delay: 0.14s; }
.sheet-content > :nth-child(4) { animation-delay: 0.2s; }
.sheet-close {
  position: absolute; top: 14px; right: 14px;
  background: #F4F5F7; border: none; cursor: pointer;
  padding: 0; margin: 0; z-index: 5; border-radius: 50%;
  width: 32px; height: 32px; box-sizing: border-box;
  display: grid; place-items: center;
  transition: background 0.15s;
  min-width: 32px; min-height: 32px; line-height: 0;
  -webkit-appearance: none; appearance: none;
}
.sheet-close svg { width: 16px; height: 16px; display: block; }
.sheet-close:active { background: #E0E0E0; }
.sheet-content {
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 10px 0;
}
.processing-icon-wrap { margin: 0 0 12px; width: 120px; height: 130px; display: grid; place-items: center; }
.processing-art { width: 78px; height: auto; display: block; transform-origin: 50% 60%; animation: checkPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both; }
@keyframes checkPop {
  0% { transform: scale(0.6); opacity: 0; }
  60% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes popIn { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.check-draw {
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: drawCheck 0.7s cubic-bezier(0.32, 0.72, 0, 1) 0.55s forwards;
}
@keyframes drawCheck { to { stroke-dashoffset: 0; } }
.particle { animation: float 3s ease-in-out infinite; }
.p1 { animation-delay: 0s; }
.p2 { animation-delay: 0.5s; }
.p3 { animation-delay: 1s; }
.p4 { animation-delay: 1.5s; }
@keyframes float {
  0%, 100% { opacity: 0.4; transform: translateY(0) rotate(0deg); }
  50% { opacity: 0.9; transform: translateY(-8px) rotate(5deg); }
}
.processing-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; line-height: 1.2; letter-spacing: -0.5px; color: var(--text); }
.processing-text {
  font-size: 13.5px; color: var(--gray); text-align: center;
  line-height: 1.5; margin-bottom: 18px; max-width: 280px;
}

/* ====== SENT ====== */
.sent-content {
  flex: 1; padding: 0 16px 16px;
  display: flex; flex-direction: column;
}
.sent-amount {
  text-align: center; font-size: 26px; font-weight: 700;
  margin-top: 22px; letter-spacing: -0.6px; color: var(--text);
  font-feature-settings: 'tnum';
}
.sent-usd {
  text-align: center; font-size: 14px; color: var(--gray);
  margin: 6px 0 24px;
}
.sent-card {
  background: var(--light); border-radius: 16px;
  padding: 0 16px; margin-bottom: 12px;
}
.sent-card .confirm-row { border-color: #E6E8EC; }
.sent-card .confirm-label { color: var(--gray); }
.sent-card .confirm-value { color: var(--text); }
.sent-card .confirm-value.status-pending { color: #E5A400 !important; }
.sent-card .confirm-value.status-ok { color: var(--green) !important; }
.btn-outline {
  width: 100%; padding: 16px; border: 1.5px solid #E3E6EA;
  border-radius: 16px; background: none; min-height: 54px;
  color: var(--blue); font-size: 15px; font-weight: 600;
  cursor: pointer; font-family: inherit;
  transition: background 0.15s;
}
.btn-outline { transition: background 0.15s, transform 0.15s; }
.btn-outline:active { background: var(--light); transform: scale(0.98); }

/* ====== RECEIVE ====== */
.receive-content {
  flex: 1; overflow-y: auto; padding: 0 16px 30px;
  -webkit-overflow-scrolling: touch;
}
.receive-content > * { animation: riseIn 0.45s cubic-bezier(0.32, 0.72, 0, 1) both; }
.receive-content > :nth-child(2) { animation-delay: 0.05s; }
.receive-content > :nth-child(3) { animation-delay: 0.1s; }
.receive-content > :nth-child(4) { animation-delay: 0.15s; }
.receive-content > :nth-child(5) { animation-delay: 0.2s; }
.receive-content > :nth-child(6) { animation-delay: 0.25s; }
.receive-action-item .action-circle { transition: background 0.15s, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.receive-action-item:active .action-circle { background: #E6E8EC; transform: scale(0.9); transition-duration: 0.08s; }
.receive-warning {
  display: flex; gap: 8px; align-items: flex-start;
  background: #FBF4DF; border-radius: 14px; padding: 16px 14px;
  margin: 14px 0 20px; font-size: 14px; color: #B48A10; line-height: 1.45;
}
.warn-icon { flex-shrink: 0; display: flex; margin-top: 1px; }
.warn-icon svg { width: 18px; height: 18px; }
.receive-token-badge {
  display: flex; align-items: center; gap: 8px;
  justify-content: center; padding: 12px 0;
}
.receive-token-name { font-size: 17px; font-weight: 700; color: var(--text); }
.receive-chain-badge {
  font-size: 12px; color: #6B7482; font-weight: 500;
  background: var(--light); padding: 3px 10px; border-radius: 999px;
}
.qr-wrapper {
  display: flex; flex-direction: column; align-items: center;
  width: 264px; margin: 10px auto 24px; padding: 16px 16px 20px;
  background: #fff; border-radius: 20px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04);
}
.qr-inner { position: relative; display: flex; }
#qr-canvas { border-radius: 0; border: none; }
.qr-logo-overlay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white; border-radius: 12px;
  padding: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.receive-address-text {
  text-align: center; font-size: 14px; font-weight: 600;
  letter-spacing: 0.1px; line-height: 1.5; color: var(--text);
  padding: 14px 4px 0; word-break: break-all;
  font-feature-settings: 'tnum';
}
.receive-actions {
  display: flex; justify-content: center; gap: 44px;
  padding: 0 0 28px;
}
.receive-action-item .action-circle { width: 54px; height: 54px; min-width: 54px; min-height: 54px; }
.receive-action-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px; cursor: pointer;
}
.receive-action-item span { font-size: 14px; font-weight: 500; text-align: center; line-height: 1.2; color: var(--text); }
.deposit-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 16px; background: var(--light);
  border-radius: 16px; margin-top: 8px; cursor: pointer;
}
.deposit-icon-wrap svg { width: 40px; height: 40px; }
.deposit-banner:active { background: #E6E8EC; }
.deposit-icon-wrap { flex-shrink: 0; }
.deposit-text-wrap { flex: 1; }
.deposit-title { font-size: 16px; font-weight: 600; color: var(--text); }
.deposit-sub { font-size: 14px; color: var(--gray); margin-top: 2px; }

/* ====== NOTIFICATION (iOS banner: collapsed "Trust / Notification" → pull down to expand) ====== */
.notification {
  position: fixed; top: calc(var(--safe-top) + 6px);
  left: 8px; right: 8px;
  background: rgba(246,246,248,0.92);
  -webkit-backdrop-filter: blur(28px) saturate(1.4); backdrop-filter: blur(28px) saturate(1.4);
  border-radius: 28px; padding: 12px 18px 12px 14px;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 28px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(0,0,0,0.04);
  z-index: 200;
  transform: translateY(calc(-100% - 60px));
  transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.4, 1);
  cursor: pointer; overflow: hidden;
  touch-action: none; -webkit-user-select: none; user-select: none;
  will-change: transform;
}
.notification.show { transform: translateY(0); }
.notification.dragging { transition: none; }
.notif-row { display: flex; gap: 12px; align-items: center; }
.notif-icon-wrap {
  flex-shrink: 0; width: 32px; height: 32px;
  border-radius: 8px; overflow: hidden;
  display: grid; place-items: center;
  background: #fff;
  box-shadow: 0 0 0 0.5px rgba(0,0,0,0.12);
}
.notif-icon-wrap img, .notif-icon-wrap svg { width: 22px; height: 22px; object-fit: contain; display: block; margin: 0; border-radius: 0; }
.notif-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.notif-title { font-size: 15px; font-weight: 600; line-height: 1.25; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.notif-body { font-size: 15px; font-weight: 400; line-height: 1.25; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.01em; }
.notif-time { font-size: 13px; color: #8e8e93; flex-shrink: 0; line-height: 1; align-self: flex-start; padding-top: 3px; }
/* Expanded: grey dim over the app with the shield, banner shows the actual tx */
.notif-backdrop {
  position: fixed; inset: 0; z-index: 199; background: #CDCDD2;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.notif-backdrop.show { opacity: 1; pointer-events: auto; }
.notif-backdrop-logo { width: 28vw; max-width: 130px; height: auto; transform: scale(0.9); transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1); }
.notif-backdrop.show .notif-backdrop-logo { transform: scale(1); }
.notification.expanded .notif-title { font-size: 13.5px; }
.notification.expanded { background: #fff; top: calc(var(--safe-top) + 48px); left: 8px; right: 8px; padding: 12px 18px 12px 14px; transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.4, 1), top 0.45s cubic-bezier(0.32, 0.72, 0, 1), left 0.45s cubic-bezier(0.32, 0.72, 0, 1), right 0.45s cubic-bezier(0.32, 0.72, 0, 1), background 0.3s; }


/* ====== TOKEN RECEIVE SCREENS ====== */
.token-receive-content { flex: 1; overflow-y: auto; padding: 0 16px 30px; }
.token-receive-addr {
  text-align: center; font-size: 14px; font-weight: 600;
  word-break: break-all; padding: 16px;
  background: var(--light); border-radius: 12px;
  margin: 16px 0; line-height: 1.5;
}
.token-receive-actions {
  display: flex; justify-content: center; gap: 20px; padding: 12px 0;
}
.copy-btn-large {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 24px; background: var(--blue);
  color: white; border: none; border-radius: 14px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  font-family: inherit;
}

/* ====== SETTINGS ====== */
.settings-content {
  flex: 1; overflow-y: auto; padding: 16px;
  -webkit-overflow-scrolling: touch;
}
.settings-content > * { animation: riseIn 0.45s cubic-bezier(0.32, 0.72, 0, 1) both; }
.settings-content > :nth-child(2) { animation-delay: 0.08s; }
.settings-content > :nth-child(3) { animation-delay: 0.12s; }
.settings-section {
  background: var(--light); border-radius: 18px;
  padding: 20px 16px; margin-bottom: 20px;
}
.settings-title { font-size: 17px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.3px; color: var(--text); }
.settings-field { margin-bottom: 14px; }
.settings-field:last-child { margin-bottom: 0; }
.settings-field label {
  font-size: 12px; color: #5B6372; display: block;
  margin-bottom: 6px; font-weight: 600;
}
.settings-field input,
.settings-field select {
  width: 100%; padding: 13px 14px; min-height: 48px;
  border: 1.5px solid #E3E6EA; border-radius: 12px;
  font-size: 15px; font-family: inherit; background: #fff;
  color: var(--text); appearance: none; -webkit-appearance: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.settings-field input::placeholder { color: #9AA1AD; }
.settings-field select {
  background: #fff url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  padding-right: 36px;
}
.settings-field input:focus,
.settings-field select:focus {
  outline: none; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(5,0,255,0.08);
}

/* ====== NAME ENTRY ====== */
#screen-name { z-index: 101; }
.name-layout {
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--safe-top) + 90px) 24px 0;
  height: 100%; box-sizing: border-box;
}
.name-logo { width: 72px; height: auto; margin-bottom: 28px; }
.name-title { font-size: 26px; font-weight: 700; color: #20252F; letter-spacing: -0.5px; }
.name-sub { font-size: 15px; color: #8E97A3; margin: 8px 0 32px; }
.name-input {
  width: 100%; height: 54px; box-sizing: border-box;
  border: 1.5px solid #E3E6EA; border-radius: 12px;
  padding: 0 16px; font-size: 16px; font-family: inherit; color: #20252F;
  outline: none; background: #fff; text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.name-input:focus { border-color: #1115FF; box-shadow: 0 0 0 3px rgba(17,21,255,0.08); }
.name-input::placeholder { color: #9AA1AD; }
.name-continue { width: 100%; margin-top: 16px; }
.name-continue:disabled { background: #EEF0F3; color: #9AA1AD; pointer-events: none; }
.name-layout > * { animation: riseIn 0.45s cubic-bezier(0.32, 0.72, 0, 1) both; }
.name-layout > :nth-child(2) { animation-delay: 0.05s; }
.name-layout > :nth-child(3) { animation-delay: 0.1s; }
.name-layout > :nth-child(4) { animation-delay: 0.15s; }
.name-layout > :nth-child(5) { animation-delay: 0.2s; }

/* ====== TX EMPTY ====== */
.tx-empty {
  text-align: center; color: var(--gray);
  font-size: 14px; padding: 30px 0;
}

/* ====== PULL TO REFRESH (iOS-style 8-tick spinner) ====== */
.ptr-indicator {
  position: absolute;
  top: calc(var(--safe-top) + 62px);
  left: 0; right: 0; height: 0;
  display: flex; justify-content: center; align-items: flex-start;
  z-index: 6; pointer-events: none; will-change: transform;
}
.ptr-ticks {
  width: 34px; height: 34px; position: relative;
  opacity: 0;
  transition: opacity .22s ease;
  will-change: transform, opacity;
}
.ptr-ticks.visible { opacity: 1; }
.ptr-ticks.spinning { animation: ptr-spin .8s steps(8) infinite; }
.ptr-ticks.spinning .ptr-tick { transition: none; }
.ptr-tick {
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 12px;
  margin: -17px 0 0 -2px;
  border-radius: 3px;
  background: #6B6B70;
  transform-origin: 2px 17px;
  opacity: 0.1;
  transition: opacity .1s linear;
}
@keyframes ptr-spin { to { transform: rotate(360deg); } }
.home-content { transition: transform .55s cubic-bezier(.22,1.1,.36,1); will-change: transform; }
.home-content.ptr-dragging { transition: none; }
.home-content.ptr-refreshing { transition: transform .35s cubic-bezier(.22,1.1,.36,1); }
.home-header { z-index: 5; }

/* ====== INCOMING TX FEEDBACK ====== */
/* Barely-there crossfade on the updated numbers — no green flash, no bump, no row sliding */
.token-item.tx-flash .token-bal, .total-balance.bal-bump { animation: softUpdate 0.5s ease; }
@keyframes softUpdate { 0% { opacity: 0.35; } 100% { opacity: 1; } }

/* ====== SCROLLBAR ====== */
::-webkit-scrollbar { display: none; }

/* ====== MOBILE / HOME SCREEN ====== */
button, input, select { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
input, select, textarea { font-size: 16px; } /* prevents iOS zoom on focus */
.send-input, .settings-field input, .settings-field select { font-size: 16px; }
img { -webkit-user-drag: none; user-drag: none; }
.screen, .send-sheet, .bottom-sheet, .notification { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
@media (display-mode: standalone) {
  .home-header, .detail-header { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .send-header { padding-top: calc(env(safe-area-inset-top, 0px) + 8px); }
  .notification { top: calc(env(safe-area-inset-top, 0px) + 6px); }
  .faceid-gif-top { top: 0px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}

/* ====== LOADING SHIMMER ====== */
@keyframes shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: 200px 0; }
}

/* Dark room behind the stacked card while a sheet is open */
body.sheet-open { background: #fff; }
body.sheet-open .bottom-nav { visibility: hidden; }

/* Face ID screen reused for transaction auth */
#screen-faceid { z-index: 70; background: #fff; }
#screen-faceid .faceid-shield-center img { width: 109px !important; }
.splash-logo { width: 117px !important; }

/* ====== MANAGE CRYPTO ====== */
.manage-content { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
.manage-search-bar { margin: 10px 15px 6px; }
.manage-search-input { flex: 1; min-width: 0; border: none; background: none; outline: none; font-family: inherit; font-size: 15px; color: #20252F; }
.manage-search-input::placeholder { color: #B7BBC2; font-weight: 500; }
.manage-list { padding: 0 12px; }
.manage-item { display: flex; align-items: center; padding: 10px 8px; min-height: 56px; }
.screen.nav-next-fade { animation: fadeIn 0.25s ease; }
.pick-item { cursor: pointer; border-radius: 14px; transition: background 0.12s; }
.pick-item:active { background: rgba(0,0,0,0.04); }
.pick-item .token-bal { text-align: right; }
.pick-item .token-bal-amount { font-feature-settings: 'tnum'; }
.pick-item .token-bal-usd { color: #8E97A3; }
.manage-item .token-info { flex: 1; min-width: 0; }
.tw-switch { width: 51px; height: 31px; border-radius: 16px; background: #E9E9EB; position: relative; flex-shrink: 0; cursor: pointer; transition: background 0.25s; }
.tw-switch .tw-knob { position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 1px 1px rgba(0,0,0,0.06); transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1); }
.tw-switch.on { background: #0500FF; }
.tw-switch.on .tw-knob { transform: translateX(20px); }
.manage-content > * { animation: riseIn 0.45s cubic-bezier(0.32, 0.72, 0, 1) both; }
.manage-content > :nth-child(2) { animation-delay: 0.06s; }

.name-input-bad { border-color: #E5484D !important; }
.btn-danger { color: #E5484D !important; border-color: #F3C4C6 !important; }
.settings-hint { font-size: 12px; color: #8E97A3; text-align: center; margin-top: 10px; line-height: 1.4; padding: 0 8px; }

.receive-token-icon { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; position: relative; overflow: visible; }
.receive-token-icon > svg, .receive-token-icon > img { width: 24px; height: 24px; display: block; border-radius: 50%; }
.receive-token-icon .chain-badge-wrap { width: 11px; height: 11px; bottom: -1px; right: -2px; }
.receive-token-icon .chain-badge-wrap svg, .receive-token-icon .chain-badge-wrap img { width: 11px; height: 11px; }
.qr-logo-bw { object-fit: contain; filter: grayscale(1) brightness(0.25) contrast(1.4); display: block; }
.qr-logo-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; background: #fff; border-radius: 10px; display: grid; place-items: center; }

/* ====== RECEIVE (screenshot match) ====== */
#screen-receive .detail-header { border-bottom: none; }
.receive-content { padding: 0 14px 30px !important; }
.receive-warning { background: #FBF4DF !important; color: #C9960C !important; border-radius: 14px !important; padding: 13px 14px !important; margin: 6px 0 16px !important; font-size: 13px !important; line-height: 1.4 !important; display: flex; gap: 10px; align-items: flex-start; }
.receive-warning .warn-icon svg { width: 15px; height: 15px; }
.receive-warning .warn-icon circle { fill: #D9A520 !important; }
.receive-token-badge { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 0 0 14px; }
.receive-token-name { font-size: 16px !important; font-weight: 700 !important; color: #20252F !important; }
.receive-chain-badge { font-size: 12px !important; color: #8E97A3 !important; background: #F1F2F5 !important; padding: 3px 7px !important; border-radius: 6px !important; font-weight: 500 !important; }
.qr-wrapper { width: 184px !important; margin: 0 auto 18px !important; padding: 12px 12px 12px !important; border-radius: 14px !important; background: #fff; box-shadow: 0 2px 16px rgba(0,0,0,0.08), 0 0 0 0.5px rgba(0,0,0,0.04) !important; display: flex; flex-direction: column; align-items: center; }
.qr-inner { position: relative; display: flex; width: 160px; height: 160px; }
#qr-canvas { border-radius: 0 !important; border: none !important; }
.qr-logo-overlay { width: 40px !important; height: 40px !important; border-radius: 0 !important; background: #fff !important; }
.qr-logo-bw { filter: grayscale(1) brightness(0) !important; }
.receive-address-text { font-size: 11px !important; font-weight: 600 !important; color: #20252F !important; line-height: 1.45 !important; padding: 10px 0 0 !important; text-align: center; word-break: break-all; letter-spacing: -0.01em !important; font-feature-settings: 'tnum'; width: 160px; }
.qr-shield { display: block; }
.receive-actions { display: flex !important; justify-content: center !important; gap: 42px !important; padding: 0 0 22px !important; }
.receive-action-item { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 76px; }
.receive-action-item .action-circle { width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important; background: #F4F5F7; }
.receive-action-item .action-circle svg { width: 18px; height: 18px; }
.receive-action-item span { font-size: 13.5px !important; letter-spacing: -0.01em; color: #20252F !important; font-weight: 500 !important; }
.deposit-banner { padding: 16px 14px !important; border-radius: 14px !important; gap: 14px !important; background: #F4F5F7 !important; margin-top: 0 !important; }
.deposit-icon-wrap svg { width: 28px !important; height: 28px !important; }
.deposit-title { font-size: 14.5px !important; font-weight: 600 !important; color: #20252F !important; }
.deposit-sub { font-size: 13px !important; color: #8E97A3 !important; margin-top: 3px !important; }

/* ====== MODAL SCREENS (slide up like Send) ====== */
.screen.modal-screen {
  z-index: 62; top: calc(var(--safe-top) + 38px); height: auto; bottom: 0;
  border-radius: 16px 16px 0 0; background: #fff;
  box-shadow: 0 -6px 30px rgba(0,0,0,0.12);
  transform: translate3d(0, 100vh, 0);
  transition: transform 0.48s cubic-bezier(0.32, 0.72, 0, 1);
  overflow: hidden;
}
.screen.modal-screen.modal-in { transform: translate3d(0, 0, 0); }
.screen.modal-screen .detail-header { padding-top: 6px !important; min-height: 52px; }
.screen.modal-screen::before {
  content: ''; position: absolute; left: 18px; right: 18px; top: -22px; height: 30px;
  background: #D9DBDF; border-radius: 14px 14px 0 0; z-index: -1;
}

.promo-carousel.promo-paused .promo-dot.active { background: #8E97A3; }

.eth-icon-large { overflow: visible; }
.eth-icon-large .chain-badge-wrap { width: 18px; height: 18px; bottom: -1px; right: -2px; }
.eth-icon-large .chain-badge-wrap svg, .eth-icon-large .chain-badge-wrap img { width: 18px; height: 18px; }
.confirm-asset-icon { position: relative; overflow: visible !important; }
.confirm-asset-icon .chain-badge-wrap { width: 9px; height: 9px; bottom: -1px; right: -2px; }
.confirm-asset-icon .chain-badge-wrap svg, .confirm-asset-icon .chain-badge-wrap img { width: 9px; height: 9px; }

/* ====== SYSTEM STATUS BAR ====== */
/* iOS draws its own time/battery over the top inset; keep that strip white and clear */
@media (display-mode: standalone) {
  .screen { padding-top: 0; }
  .home-header, .detail-header, .name-layout { padding-top: calc(env(safe-area-inset-top, 0px) + 6px) !important; }
  .screen.modal-screen .detail-header { padding-top: 6px !important; }
  .send-header { padding-top: calc(env(safe-area-inset-top, 0px) + 6px) !important; }
}

.confirm-label svg { width: 13px !important; height: 13px !important; }

#processing-sheet .btn-primary { min-height: 44px; padding: 12px 16px; font-size: 15px; }

/* Header: title truly centered regardless of side button widths; header always tappable */
.detail-header { position: relative; z-index: 20; }
.detail-header .detail-title { position: absolute; left: 60px; right: 60px; top: 50%; transform: translateY(-50%); text-align: center; pointer-events: none; }
.detail-header .back-btn { position: relative; z-index: 2; }
.detail-header .detail-actions, .detail-header > .icon-btn { margin-left: auto; position: relative; z-index: 2; }
@media (display-mode: standalone) {
  .detail-header .detail-title { top: calc(50% + env(safe-area-inset-top, 0px) / 2); }
}





/* ====== iPhone 16 Pro Max / Plus (440×956pt) — scale up ~10% ====== */
@media (min-width: 430px) and (min-height: 900px) {
  .home-title { font-size: 19px; }
  .search-bar { height: 42px; margin: 8px 18px 0; }
  .search-placeholder { font-size: 16.5px; }
  .wallet-selector { padding: 20px 18px 2px; }
  .wallet-name { font-size: 15.5px; }
  .wallet-mini-btn { width: 36px; height: 36px; }
  .wallet-mini-btn svg { width: 15px; height: 15px; }
  .total-balance { font-size: 36px; padding: 6px 17px 22px; }
  .action-buttons { padding: 2px 16px 22px; gap: 24px; }
  .action-circle { width: 58px; height: 58px; min-width: 58px; min-height: 58px; }
  .action-circle svg { width: 24px; height: 24px; }
  .action-btn span { font-size: 15.5px; }
  .promo-carousel { margin: 0 18px 6px; }
  .promo-card { min-height: 76px; padding: 14px 16px; }
  .promo-title { font-size: 14.5px; }
  .promo-link { font-size: 13px; }
  .tabs { padding: 0 18px; gap: 28px; }
  .tab { font-size: 16.5px; padding: 11px 0; }
  .token-list { padding: 0 18px; }
  .token-item { padding: 13px 8px; min-height: 62px; }
  .token-icon-wrap { width: 43px; height: 43px; margin-right: 14px; }
  .token-icon-wrap svg, .token-icon-wrap img { width: 43px; height: 43px; }
  .chain-badge-wrap { width: 20px; height: 20px; }
  .chain-badge-wrap svg, .chain-badge-wrap img { width: 20px; height: 20px; }
  .token-symbol { font-size: 16.5px; }
  .token-chain-label { font-size: 11px; padding: 2px 7px; }
  .token-price-row { font-size: 13.5px; }
  .token-bal-amount { font-size: 16.5px; }
  .token-bal-usd { font-size: 13.5px; }
  .manage-crypto { font-size: 15px; }
  .nav-item { font-size: 11.5px; gap: 4px; }
  .nav-item svg { width: 25px; height: 25px; }
  .detail-name { font-size: 18px; }
  .eth-balance-large { font-size: 38px; }
  .eth-balance-usd { font-size: 16px; }
  .confirm-amount, .sent-amount { font-size: 42px; }
  .send-input { font-size: 16px; }
  .send-box { height: 56px; }
  .notification { left: 10px; right: 10px; padding: 13px 20px 13px 15px; }
  .notif-icon-wrap { width: 36px; height: 36px; border-radius: 9px; }
  .notif-icon-wrap img, .notif-icon-wrap svg { width: 25px; height: 25px; }
  .notif-title, .notif-body { font-size: 16px; }
  .notification.expanded .notif-title { font-size: 14.5px; }
  .notif-time { font-size: 14px; }
  .faceid-gif { width: 230px; }
  .faceid-anim-container { width: 230px; height: 194px; }
  .splash-logo { width: 26vw; }
}

/* Top strip under the iOS status bar is always solid white — nothing can show through or cast a shadow there */
html { background: #fff; }
body { background: #fff; }
body.sheet-open { background: #fff; }
#screen-home.active .home-header { animation: none !important; opacity: 1 !important; transform: none !important; }
.home-header { background: #fff; box-shadow: none !important; }
.home-header::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #fff; z-index: 6; pointer-events: none; }
body.sheet-open .home-header::before { display: none; }



/* ====== VIEWPORT (iOS standalone-safe) ======
   iOS can report a viewport shorter than the screen (after the keyboard, in standalone mode), so fixed
   elements anchored to bottom:0 stop short and leave a band. We size everything from --app-h, which JS
   sets to the real screen height, and never anchor to the bottom. */
:root { --app-h: 100vh; --nav-h: 70px; }
html { background: #fff; height: 100%; }
body { position: fixed; top: 0; left: 0; width: 100%; height: var(--app-h); margin: 0; background: #fff; overflow: hidden; }
.screen:not(.modal-screen), .notif-backdrop, .send-overlay, .overlay, #screen-splash, #screen-faceid {
  position: fixed; top: 0; left: 0; right: 0; bottom: auto; height: var(--app-h); min-height: 0;
}
.screen.modal-screen { position: fixed; top: calc(var(--safe-top) + 38px); left: 0; right: 0; bottom: auto; height: calc(var(--app-h) - var(--safe-top) - 38px); }

body.sheet-open { background: #fff; }

/* Face ID animation sits a touch higher */
.faceid-gif-top { top: -6px !important; }

/* ====== BOTTOM NAV: in-flow at the bottom of the home screen (no fixed positioning, no measuring) ====== */
#screen-home { display: none; flex-direction: column; }
#screen-home.active { display: flex; }
#screen-home .bottom-nav { position: static; flex-shrink: 0; width: 100%; }

/* ====== SHEETS: white continuation below every bottom sheet so no dark band can ever show under it ====== */
.send-sheet::after, .screen.modal-screen::after, .bottom-sheet::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 300px; background: #fff; pointer-events: none;
}
.screen.modal-screen { overflow: visible; }
.screen.modal-screen > * { position: relative; z-index: 1; }

/* Notification UI fully removed from layout */
#notif-holder, #notification, #notif-backdrop { display: none !important; }

/* Inputs: never let iOS scroll a hidden-overflow container to reveal them — give it a legit scroller instead */
.send-sheet { overflow: hidden; }
.send-sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; min-height: 0; flex: 1; }
.screen.modal-screen > .manage-content, .screen.modal-screen > .receive-content { overflow-y: auto; -webkit-overflow-scrolling: touch; }
#screen-name, #screen-settings { overflow: hidden; }

html { background: #fff !important; }

/* Dark room for stacked sheets lives INSIDE the rendered area (overlay), never on body/html */
.send-overlay.active { background: #000; }
#screen-home.send-open::before, .screen.send-open::before { }
.sheet-room { position: fixed; top: 0; left: 0; right: 0; height: var(--app-h); background: #000; z-index: 0; display: none; }
body.sheet-open .sheet-room { display: block; }
/* Modal screens (Receive) sit above the room */
.screen.modal-screen { z-index: 62; }

/* ====== STANDALONE: the home screen is the one view that must reach the display bottom ======
   iOS can report innerHeight < screen.height after the keyboard; the rest of the UI follows innerHeight (so sheets
   never show a dark band), but the home screen + nav stretch to the real display height so the bar sits at the edge. */
html.standalone, html.standalone body { height: var(--screen-h, var(--app-h)) !important; min-height: var(--screen-h, var(--app-h)) !important; }
html.standalone #screen-home { height: var(--screen-h, var(--app-h)) !important; }
html.standalone #screen-home .bottom-nav { padding-bottom: max(0px, calc(env(safe-area-inset-bottom, 0px) - 14px)) !important; }

/* ====== NUMERIC TYPE SYSTEM (Avenir Next) ======
   Tiers: hero (home total) · large (coin / confirm / sent amount) · list (row amount) · caption (price, %, $)
   Rules: tabular figures everywhere; tracking tightens as size grows; weight carries hierarchy, not size alone. */
.num, .total-balance, .eth-balance-large, .confirm-amount, .sent-amount, .token-receive-balance, .notif-expand-title,
.token-bal-amount, .token-bal-usd, .token-price-row, .eth-balance-usd, .confirm-usd, .sent-usd, .confirm-value,
.tx-amount, .tx-usd, .send-usd-hint, .send-input, .settings-field input, .token-receive-usd, .gas-badge, .detail-row-value,
.pick-item .token-bal-amount, .pick-item .token-bal-usd, .send-sheet-body input, .receive-address-text {
  font-family: 'Num', 'Avenir Next', 'Inter', sans-serif; font-feature-settings: 'tnum', 'lnum'; font-variant-numeric: tabular-nums lining-nums;
}
/* hero — CUSTOM GLYPHS cut from the reference sample (icons/num/*.png), laid out with the screenshot's spacing */
.total-balance { --cap: 23px; display: flex !important; align-items: flex-start; height: calc(var(--cap) * 1.3); padding: 6px 15px 16px !important; color: #1C2230 !important; transform: none !important; font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important; -webkit-text-stroke: 0; }
.total-balance .g { display: block; flex: none; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
@media (min-height: 900px) { .total-balance { --cap: 25px; } }
/* large */
.eth-balance-large, .confirm-amount, .sent-amount, .token-receive-balance, .notif-expand-title { font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: #141A24; }
.eth-balance-large { font-size: 30px; } .confirm-amount, .sent-amount { font-size: 32px; }
.eth-balance-usd, .confirm-usd, .sent-usd, .token-receive-usd { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; color: #8E97A3; }
/* list */
.token-bal-amount, .pick-item .token-bal-amount { font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: #141A24; line-height: 1.2; }
.tx-amount { font-weight: 600; letter-spacing: -0.015em; }
/* caption */
.token-bal-usd, .token-price-row, .pick-item .token-bal-usd, .tx-usd, .send-usd-hint, .gas-badge { font-size: 10.5px; font-weight: 500; letter-spacing: 0; color: #8E97A3; line-height: 1.2; }
.token-price-row .green { color: var(--green); font-weight: 600; } .token-price-row .red { color: var(--red); font-weight: 600; }
.confirm-value, .detail-row-value { font-weight: 600; letter-spacing: -0.01em; color: #141A24; }
.send-input, .settings-field input { font-weight: 500; letter-spacing: -0.01em; }
@media (min-height: 900px) {
  .total-balance { font-size: 33px !important; }
  .token-bal-amount, .pick-item .token-bal-amount { font-size: 15.5px; }
  .token-bal-usd, .token-price-row, .pick-item .token-bal-usd { font-size: 11.5px; }
}
.home-title, .detail-name, .send-sheet-title, .settings-title, .receive-token-name, .processing-title { font-family: 'Inter', sans-serif; letter-spacing: -0.02em; }
.token-symbol, .tx-type, .nav-item, .action-btn span { font-family: 'Inter', sans-serif; letter-spacing: -0.01em; }
.token-price-row, .token-bal-usd, .token-chain-label, .confirm-label, .send-label, .settings-field label { font-weight: 500; }


/* Token row: right column aligned to the left column's two lines */
.token-item .token-info { display: flex; flex-direction: column; justify-content: center; }
.token-item .token-bal { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; align-self: stretch; }
.token-item .token-top-row, .token-item .token-bal-amount { height: 20px; line-height: 20px; }
.token-item .token-price-row, .token-item .token-bal-usd { height: 16px; line-height: 16px; margin-top: 0 !important; }
.token-item .token-bal-amount { font-size: 14.5px; font-weight: 600; color: #141A24; letter-spacing: -0.2px; transform: none; }
.token-item .token-bal-usd { transform: none; }
@media (min-height: 900px) { .token-item .token-top-row, .token-item .token-bal-amount { height: 22px; line-height: 22px; } .token-item .token-bal-amount { font-size: 16.5px; } .token-item .token-price-row, .token-item .token-bal-usd { height: 18px; line-height: 18px; } }

/* Chain badge (ETH / Tron / Solana label): shorter box */
.token-chain-label { padding: 0 7px !important; line-height: 15px !important; height: 15px; font-size: 12px !important; display: inline-flex; align-items: center; }
@media (min-height: 900px) { .token-chain-label { line-height: 16px !important; height: 16px; font-size: 12.5px !important; } }

/* Small numbers rendered with the custom glyphs — same grey, same height as the old 10.5px caption */
.token-price-row.num-glyphs, .token-bal-usd.num-glyphs { --cap: 8px; display: flex; align-items: flex-start; gap: calc(var(--cap) * 0.3); color: #8E97A3; font-size: 0 !important; line-height: 0 !important; height: 16px; padding-top: 4px; }
.token-bal-usd.num-glyphs { justify-content: flex-end; }
.num-glyphs .nrun { display: flex; align-items: flex-start; height: calc(var(--cap) * 1.3); }
.num-glyphs .nrun.green { color: var(--green); } .num-glyphs .nrun.red { color: var(--red); }
.num-glyphs .g { display: block; flex: none; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
@media (min-height: 900px) { .token-price-row.num-glyphs, .token-bal-usd.num-glyphs { --cap: 9px; height: 18px; } }

/* Coin amount (right column) — same visual weight as BTC/ETH labels */
.token-item .token-bal-amount { font-weight: 500 !important; -webkit-text-stroke: 0; color: #141A24 !important; letter-spacing: -0.035em !important; }

.total-balance .g, .num-glyphs .g { image-rendering: auto; transform: translateZ(0); }
.total-balance { --cap: 24px; }
@media (min-height: 900px) { .total-balance { --cap: 26px; } }

.total-balance .g, .num-glyphs .g { -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; }

/* ====== HOME HEADER SPACING — proportions from the reference (cap = balance digit height) ====== */
.wallet-selector { padding-top: 6px !important; padding-bottom: 0 !important; }
.total-balance { padding: calc(var(--cap) * 0.55) 15px calc(var(--cap) * 1.25) !important; height: auto !important; }
.action-buttons { padding-top: 0 !important; padding-bottom: calc(var(--cap) * 0.75) !important; }
.action-circle { width: calc(var(--cap) * 2.1) !important; height: calc(var(--cap) * 2.1) !important; min-width: 0 !important; min-height: 0 !important; }
.action-btn { gap: calc(var(--cap) * 0.5) !important; }
.action-btn span { font-size: 15px !important; font-weight: 500 !important; color: #141A24 !important; }
.action-buttons, .action-btn { --cap: 24px; }
@media (min-height: 900px) { .action-buttons, .action-btn { --cap: 26px; } }

/* Coin amount in custom Medium glyphs — same height as the BTC/ETH label line */
.token-item .token-bal-amount.num-glyphs { --cap: 10.5px; display: flex; justify-content: flex-end; align-items: flex-start; color: #141A24; font-size: 0 !important; line-height: 0 !important; height: 20px; padding-top: 4px; letter-spacing: 0 !important; -webkit-text-stroke: 0; }
@media (min-height: 900px) { .token-item .token-bal-amount.num-glyphs { --cap: 12px; height: 22px; } }
.token-price-row.num-glyphs, .token-bal-usd.num-glyphs { --cap: 8.5px; }
@media (min-height: 900px) { .token-price-row.num-glyphs, .token-bal-usd.num-glyphs { --cap: 9.5px; } }

/* Header mini buttons — redrawn to the reference: light tile, grey geometric glyph */
.wallet-mini-btn { width: 30px !important; height: 30px !important; border-radius: 8px !important; background: #F3F4F6 !important; }
.wallet-mini-btn svg { width: 17px !important; height: 17px !important; fill: #8A909A !important; display: block; }
.wallet-selector > div:last-child { gap: 12px !important; }
@media (min-height: 900px) { .wallet-mini-btn { width: 34px !important; height: 34px !important; border-radius: 9px !important; } .wallet-mini-btn svg { width: 19px !important; height: 19px !important; } }

/* Pixel-exact caps so every digit lands on the same row */
.total-balance { --cap: 24px; } .token-item .token-bal-amount.num-glyphs { --cap: 11px; } .token-price-row.num-glyphs, .token-bal-usd.num-glyphs { --cap: 9px; }
@media (min-height: 900px) { .total-balance { --cap: 26px; } .token-item .token-bal-amount.num-glyphs { --cap: 12px; } .token-price-row.num-glyphs, .token-bal-usd.num-glyphs { --cap: 10px; } }
.total-balance .g, .num-glyphs .g { -webkit-mask-position: center bottom; mask-position: center bottom; }

/* Baseline-exact glyph rows: line box = 1.4 cap, baseline at 1.1 cap */
.total-balance { height: calc(var(--cap) * 1.4) !important; align-items: flex-start !important; }
.total-balance .g, .num-glyphs .g { -webkit-mask-size: 100% 100% !important; mask-size: 100% 100% !important; -webkit-mask-position: 0 0 !important; mask-position: 0 0 !important; }
.num-glyphs .nrun { height: calc(var(--cap) * 1.4) !important; align-items: flex-start !important; }
.token-item .token-bal-amount.num-glyphs, .token-item .token-price-row.num-glyphs, .token-item .token-bal-usd.num-glyphs { padding-top: 0 !important; align-items: center !important; }
.token-item .token-bal-amount.num-glyphs { height: 20px !important; }
.token-item .token-price-row.num-glyphs, .token-item .token-bal-usd.num-glyphs { height: 16px !important; }
@media (min-height: 900px) { .token-item .token-bal-amount.num-glyphs { height: 22px !important; } .token-item .token-price-row.num-glyphs, .token-item .token-bal-usd.num-glyphs { height: 18px !important; } }

/* ====== NUMBERS: real font (WalletNum) — no more image glyphs ====== */
.total-balance { font-family: 'WalletNum', 'Num', sans-serif !important; font-weight: 700 !important; font-size: 30px !important; line-height: 1 !important; letter-spacing: 0 !important; height: auto !important; display: block !important; color: #1C2230 !important; transform: none !important; -webkit-text-stroke: 0; font-feature-settings: normal !important; font-variant-numeric: normal !important; }
.total-balance .g, .total-balance .sep { display: none !important; }
.token-item .token-bal-amount, .token-item .token-price-row, .token-item .token-bal-usd, .pick-item .token-bal-amount, .pick-item .token-bal-usd,
.eth-balance-large, .eth-balance-usd, .confirm-amount, .confirm-usd, .sent-amount, .sent-usd, .confirm-value, .tx-amount, .tx-usd, .send-usd-hint, .token-receive-balance, .token-receive-usd, .detail-row-value {
  font-family: 'WalletNum', 'Num', sans-serif !important; font-weight: 700 !important; letter-spacing: 0 !important; transform: none !important; font-feature-settings: normal !important;
}
/* restore text layout for list numbers */
.token-item .token-bal-amount, .token-item .token-price-row, .token-item .token-bal-usd { display: block !important; font-size: 13px !important; line-height: 20px !important; height: 20px !important; padding: 0 !important; color: #141A24 !important; }
.token-item .token-price-row, .token-item .token-bal-usd { font-size: 11px !important; line-height: 16px !important; height: 16px !important; color: #8E97A3 !important; }
.token-item .token-price-row .green { color: var(--green) !important; } .token-item .token-price-row .red { color: var(--red) !important; }
.token-item .token-bal { text-align: right; }
.eth-balance-large, .confirm-amount, .sent-amount { font-size: 32px !important; }
@media (min-height: 900px) { .total-balance { font-size: 33px !important; } .token-item .token-bal-amount { font-size: 14.5px !important; line-height: 22px !important; height: 22px !important; } .token-item .token-price-row, .token-item .token-bal-usd { font-size: 12px !important; line-height: 18px !important; height: 18px !important; } }

/* Balance tucked closer under the wallet name */
.total-balance { padding-top: 4px !important; margin-top: -2px !important; }
.wallet-selector { padding-bottom: 0 !important; }

/* Coin amount matches the BTC/ETH label cap height */
.token-item .token-bal-amount { font-size: 14.5px !important; }
@media (min-height: 900px) { .token-item .token-bal-amount { font-size: 16px !important; } }

@font-face { font-family: 'WalletText'; src: url('fonts/WalletText-Bold.ttf?v=1791413854524') format('truetype'); font-weight: 700; font-style: normal; font-display: block; }

/* Small grey price/% under the symbol: nudged down, a touch larger */
.token-item .token-price-row { font-size: 11.6px !important; line-height: 16px !important; height: 16px !important; margin-top: 4px !important; padding-top: 1px; }

/* Grey $ value under the token amount — same bump as the price row */
.token-item .token-bal-usd { font-size: 11.6px !important; line-height: 16px !important; height: 16px !important; margin-top: 4px !important; padding-top: 1px; }

/* Transfer / Confirm detail rows: labels and values share one size, weight and baseline */
.sent-card .confirm-row, .confirm-card .confirm-row { align-items: center !important; padding: 11px 0 !important; min-height: 40px; }
.sent-card .confirm-label, .confirm-card .confirm-label,
.sent-card .confirm-value, .confirm-card .confirm-value, .sent-card .confirm-value.bold, .confirm-card .confirm-value.bold {
  font-size: 13px !important; line-height: 18px !important; letter-spacing: 0 !important;
}
.sent-card .confirm-value, .confirm-card .confirm-value { font-weight: 600 !important; max-width: 62% !important; }
/* numeric glyph font only for the number itself; fall back to the UI face for words/addresses, same weight */
.sent-card .confirm-value, .confirm-card .confirm-value { font-family: 'WalletNum', 'Avenir Next', 'Inter', sans-serif !important; }
.sent-card .confirm-label, .confirm-card .confirm-label { font-weight: 500 !important; }

/* Letters next to numbers (ETH, USDT, "Today at", addresses) come from the matching specimen font so cap height and weight match the digits */
.eth-balance-large, .eth-balance-usd, .confirm-amount, .confirm-usd, .sent-amount, .sent-usd, .confirm-value, .tx-amount, .tx-usd,
.token-receive-balance, .token-receive-usd, .detail-row-value, .notif-expand-title,
.token-item .token-bal-amount, .token-item .token-price-row, .token-item .token-bal-usd, .pick-item .token-bal-amount, .pick-item .token-bal-usd, .send-usd-hint {
  font-family: 'WalletNum', 'WalletText', 'Avenir Next', 'Inter', sans-serif !important;
}
.sent-card .confirm-value, .confirm-card .confirm-value { font-family: 'WalletNum', 'WalletText', 'Avenir Next', 'Inter', sans-serif !important; }

/* Tighter letter tracking for WalletText glyphs next to numbers */
.eth-balance-large, .eth-balance-usd, .confirm-amount, .confirm-usd, .sent-amount, .sent-usd, .confirm-value, .tx-amount, .tx-usd,
.token-receive-balance, .token-receive-usd, .detail-row-value, .notif-expand-title,
.token-item .token-bal-amount, .token-item .token-price-row, .token-item .token-bal-usd, .pick-item .token-bal-amount, .pick-item .token-bal-usd, .send-usd-hint,
.sent-card .confirm-value, .confirm-card .confirm-value { letter-spacing: -0.03em !important; }
.eth-balance-large, .confirm-amount, .sent-amount { letter-spacing: -0.035em !important; }

/* Reference: detail rows are the regular UI face, same weight as labels; only the headline amount is the bold display font */
.sent-card .confirm-value, .confirm-card .confirm-value, .sent-card .confirm-value.bold, .confirm-card .confirm-value.bold {
  font-family: 'Avenir Next', 'Inter', -apple-system, sans-serif !important; font-weight: 500 !important; letter-spacing: -0.01em !important;
  font-size: 13px !important; line-height: 18px !important; color: #1C2230 !important; font-feature-settings: 'tnum' !important;
}
.sent-card .confirm-label, .confirm-card .confirm-label { font-family: 'Avenir Next', 'Inter', -apple-system, sans-serif !important; font-weight: 500 !important; font-size: 13px !important; color: #8E97A3 !important; }
/* headline amount: digits + letters from the specimen fonts, tight tracking like the reference */
.sent-amount, .confirm-amount, .eth-balance-large { letter-spacing: -0.05em !important; word-spacing: -0.05em; }
.sent-usd, .confirm-usd, .eth-balance-usd { font-family: 'Avenir Next', 'Inter', -apple-system, sans-serif !important; font-weight: 500 !important; letter-spacing: -0.01em !important; }

/* Transfer (confirm) screen per reference: grey regular labels, semibold dark values, fee on two lines */
.confirm-card .confirm-label { font-weight: 400 !important; color: #8E97A3 !important; font-size: 13.5px !important; }
.confirm-card .confirm-value { font-weight: 600 !important; color: #1C2230 !important; font-size: 13.5px !important; letter-spacing: -0.015em !important; }
.confirm-card .confirm-value.bold { font-weight: 700 !important; }
.confirm-card .confirm-value .confirm-sub { display: block; font-weight: 500; color: #8E97A3; font-size: 13px; margin-top: 2px; letter-spacing: 0; }
.sent-card .confirm-label { font-weight: 400 !important; font-size: 13.5px !important; }
.sent-card .confirm-value { font-weight: 600 !important; font-size: 13.5px !important; letter-spacing: -0.015em !important; }

/* Network fee: "≈ $0.06" sits on the same line as the fee, bottoms aligned */
.confirm-card .confirm-value .confirm-sub, #confirm-fee-usd { display: inline !important; margin-top: 0 !important; margin-left: 6px; font-size: 13.5px !important; line-height: 18px !important; font-weight: 500; color: #8E97A3; vertical-align: baseline; }
.confirm-card .confirm-row { align-items: center !important; }

/* Network fee: "≈ $0.06" back on its own line under the amount, right-aligned */
.confirm-card .confirm-value .confirm-sub, #confirm-fee-usd { display: block !important; margin-left: 0 !important; margin-top: 2px !important; text-align: right; }
.confirm-card .confirm-row { align-items: flex-start !important; }
.confirm-card .confirm-label { line-height: 18px !important; }

/* Headline amount on Transfer / Sent slightly smaller */
.confirm-amount, .sent-amount { font-size: 28px !important; }
@media (min-height: 900px) { .confirm-amount, .sent-amount { font-size: 30px !important; } }

.session-log { margin-top: 20px; padding: 12px 14px 6px; background: var(--light); border-radius: 14px; }
.session-log .log-title { font-size: 12px; font-weight: 600; color: #8E97A3; letter-spacing: .02em; text-transform: uppercase; margin-bottom: 6px; }
.session-log .log-row { font-size: 12.5px; color: #3C4454; padding: 5px 0; border-top: 1px solid #E6E8EC; font-feature-settings: 'tnum'; }
.session-log .log-row:first-of-type { border-top: none; }
.session-log .log-queued { color: #1C2230; font-weight: 600; }
.session-log .log-muted { color: #9AA1AD; }

/* Real Face ID: retry block shown only after a cancelled/failed scan */
.faceid-retry { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 48px); display: none; flex-direction: column; align-items: center; gap: 12px; padding: 0 24px; }
.faceid-retry.visible { display: flex; }
.faceid-retry-text { font-size: 15px; color: #8E97A3; font-weight: 500; }
.faceid-retry-btn { height: 48px; padding: 0 28px; border-radius: 24px; border: none; background: var(--blue); color: #fff; font: 600 16px/1 inherit; font-family: inherit; cursor: pointer; }
.faceid-cancel-btn { height: 40px; padding: 0 16px; border: none; background: none; color: #8E97A3; font-size: 15px; font-weight: 500; font-family: inherit; cursor: pointer; }

.faceid-diag { font-size: 11px; color: #B0B6C0; text-align: center; max-width: 280px; line-height: 1.4; word-break: break-word; }
.faceid-diag:empty { display: none; }

.log-remove { margin-left: 8px; color: #9AA1AD; font-weight: 700; cursor: pointer; padding: 0 4px; }
.log-remove:active { color: #E5484D; }

/* Main balance +7%, bottom bar lifted 7% */
.total-balance { font-size: 32px !important; }
@media (min-height: 900px) { .total-balance { font-size: 35.5px !important; } }
#screen-home .bottom-nav { padding-bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) - 8px)) !important; }
html.standalone #screen-home .bottom-nav { padding-bottom: max(6px, calc(env(safe-area-inset-bottom, 0px) - 8px)) !important; }

/* Token row numbers +5% */
.token-item .token-bal-amount { font-size: 14.7px !important; }
.token-item .token-price-row, .token-item .token-bal-usd { font-size: 12.2px !important; }
@media (min-height: 900px) { .token-item .token-bal-amount { font-size: 15.3px !important; } .token-item .token-price-row, .token-item .token-bal-usd { font-size: 12.6px !important; } }

/* Bottom bar: icons+labels lifted, more air below (reference proportions) */
#screen-home .bottom-nav, html.standalone #screen-home .bottom-nav { padding-top: 10px !important; padding-bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 2px)) !important; }

/* Token row numbers: 5% shorter (vertical squeeze only) */
.token-item .token-bal-amount, .token-item .token-price-row, .token-item .token-bal-usd { transform: scaleY(0.95) !important; transform-origin: center !important; }

/* Amount matches ETH/USDT/SOL label size */
.token-item .token-bal-amount { font-size: 15.2px !important; }
@media (min-height: 900px) { .token-item .token-bal-amount { font-size: 17.3px !important; } }
@media (max-height: 700px) { .token-item .token-bal-amount { font-size: 13.6px !important; } }

/* 1. Splash logo static */
.splash-logo { animation: none !important; opacity: 1 !important; transform: translate(-50%, -50%) !important; }
/* 3. Receive screen: header styled like the Send sheet */
#screen-receive.modal-screen, #screen-receive { border-radius: 16px 16px 0 0 !important; overflow: hidden; }
#screen-receive .detail-header { position: relative; height: 56px !important; min-height: 0 !important; padding: 0 16px !important; display: flex; align-items: center; justify-content: center; border-bottom: none !important; background: #fff; border-radius: 16px 16px 0 0; }
#screen-receive .detail-header .back-btn { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
#screen-receive .detail-header .icon-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: transparent; display: grid; place-items: center; }
#screen-receive .detail-header .icon-btn svg { width: 24px; height: 24px; }
#screen-receive .detail-header .icon-btn svg circle:first-child { fill: #8E97A3; }
#screen-receive .detail-title { position: static !important; transform: none !important; }
#screen-receive .detail-name { font-size: 16px !important; font-weight: 700 !important; color: #20252F !important; }
.receive-content { padding: 6px 16px 30px !important; }
.receive-warning { margin: 0 0 18px !important; border-radius: 16px !important; padding: 16px 16px !important; line-height: 1.4 !important; }


/* "Main Wallet 1" a touch bolder */
.wallet-name { font-weight: 600 !important; -webkit-text-stroke: 0.12px currentColor; }

/* Face ID gif +8% */
.faceid-gif { width: 224px !important; }
.faceid-anim-container { width: 224px !important; height: 188px !important; }
@media (min-height: 900px) { .faceid-gif { width: 248px !important; } .faceid-anim-container { width: 248px !important; height: 210px !important; } }

/* Token labels +7%, all numbers +7% (incl. main balance) */
.token-item .token-symbol { font-size: 15.5px !important; font-weight: 588 !important; }
.token-item .token-bal-amount { font-size: 17.7px !important; }
.token-item .token-price-row, .token-item .token-bal-usd { font-size: 13px !important; }
.total-balance { font-size: 34.2px !important; }
@media (min-height: 900px) {
  .token-item .token-symbol { font-size: 17.5px !important; font-weight: 588 !important; }
  .token-item .token-bal-amount { font-size: 20.3px !important; }
  .token-item .token-price-row, .token-item .token-bal-usd { font-size: 13.5px !important; }
  .total-balance { font-size: 38px !important; }
}
@media (max-height: 700px) { .token-item .token-symbol { font-size: 13.9px !important; font-weight: 588 !important; } .token-item .token-bal-amount { font-size: 16.0px !important; } }

/* Splash → Face ID: shield must not move or resize (same size, same anchor, no fades/animations) */
#screen-splash, #screen-faceid { animation: none !important; transition: none !important; opacity: 1 !important; }
#screen-faceid.fade-in { animation: none !important; }
.splash-logo, #screen-faceid .faceid-shield-center img { width: 105px !important; height: auto !important; }
.splash-logo { animation: none !important; transition: none !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.faceid-shield-center { animation: none !important; transition: none !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; }
.faceid-shield-center img { animation: none !important; transition: none !important; display: block; }

/* Receive picker sheet: same rounded header as the Receive screen */
#screen-receive-pick { border-radius: 16px 16px 0 0 !important; overflow: hidden; }
#screen-receive-pick .detail-header { position: relative; height: 56px !important; min-height: 0 !important; padding: 0 16px !important; display: flex; align-items: center; justify-content: center; border-bottom: none !important; background: #fff; border-radius: 16px 16px 0 0; }
#screen-receive-pick .detail-header .back-btn { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
#screen-receive-pick .detail-header .icon-btn { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
#screen-receive-pick .detail-title { position: static !important; transform: none !important; }
#screen-receive-pick .detail-name { font-size: 16px !important; font-weight: 700 !important; color: #20252F !important; }

/* Receive picker rows = home token rows (same fonts, icons, spacing) */
.pick-item.token-item .token-bal-amount, .pick-item.token-item .token-bal-usd { font-size: inherit; }
#receive-pick-list { padding: 0 16px; }

/* Symbol labels (ETH, USDT…) and amounts: font-weight -6% */
.token-item .token-symbol { font-weight: 550 !important; }
.token-item .token-bal-amount { font-weight: 660 !important; }