* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 360px;
  height: 600px;
  min-width: 360px;
  min-height: 600px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #fff;
  overflow: hidden;
}

.screen {
  position: relative;
  width: 360px;
  height: 600px;
}

/* Кнопка выбора языка и выпадающий список */
.lang-wrap {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 10;
}

/* Белая маска под кнопкой — закрывает тень с фона, не подсвечивается при наведении */
.lang-trigger-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(100% + 6px);
  background: #fff;
  pointer-events: none;
  z-index: 0;
}

.lang-trigger {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  min-width: 76px;
  padding: 6px 10px;
  font-size: 12px;
  color: #333;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease;
  box-shadow: none;
  outline: none;
}

.lang-trigger:hover {
  background: #e8e8e8;
}

.lang-dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  min-width: 76px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.06);
  overflow: hidden;
  display: none;
  z-index: 2;
}

.lang-dropdown.is-open {
  display: block;
}

.lang-option {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  color: #333;
  background: #fff;
  border: none;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s ease;
}

.lang-option.is-selected {
  background: #fff;
}

.lang-option:hover {
  background: rgba(0, 0, 0, 0.07);
}

/* Фон попапа — статичная картинка целиком */
.welcome-bg-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 360px;
  height: 600px;
}

.welcome-bg {
  display: block;
  width: 360px;
  height: 600px;
  object-fit: cover;
  object-position: top center;
  vertical-align: top;
}

/* Только красный квадрат (кубик) — наклон строго внутри, буквы и кнопки не искажаются; z-index ниже блока языка */
.welcome-tilt-wrap {
  position: absolute;
  left: 20px;
  top: 42px;
  width: 320px;
  height: 218px;
  overflow: hidden;
  pointer-events: auto;
  z-index: 1;
}

.welcome-tilt-wrap .welcome-tilt {
  position: absolute;
  width: 360px;
  height: 600px;
  left: -20px;
  top: -42px;
  object-fit: cover;
  object-position: top center;
  transform-origin: 180px 151px;
  transition: transform 0.18s ease-out;
  will-change: transform;
}

/* Ledger network selection page (full tab) */
.ledger-body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #f4f4f6;
}

.ledger-screen {
  width: 33.333vw;            /* строго треть ширины экрана */
  max-width: 520px;
  min-width: 360px;
  margin: 0 auto;             /* центрируем по горизонтали */
  min-height: 100vh;          /* тянется на всю высоту окна */
  background: #fff;
  padding: 24px 20px 24px;
  box-sizing: border-box;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
}

.ledger-title {
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
  color: #111;
}

.ledger-card {
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #e3e3ea;
  padding: 4px 0;
  margin-bottom: 12px;
}

.ledger-card-evm {
  padding: 8px 0 4px;
}

.ledger-evm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px 8px;
  font-size: 13px;
  color: #222;
}

.ledger-evm-help {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f0f0f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: default;
}

.ledger-evm-list {
  padding-top: 0;
}

.ledger-option,
.ledger-option-evm-header {
  width: 100%;
  border: none;
  background: transparent;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-sizing: border-box;
}

.ledger-option + .ledger-option {
  border-top: 1px solid #eeeef4;
}

.ledger-radio-right {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #c6c6d5;
  box-sizing: border-box;
  margin-left: auto;
  position: relative;
}

.ledger-radio-right::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #111822;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.ledger-card-main.is-selected .ledger-radio-right,
.ledger-card-evm.is-selected .ledger-radio-right {
  border-color: #111;
  box-shadow: 0 0 0 1px #111;
}

.ledger-card-main.is-selected .ledger-radio-right::after,
.ledger-card-evm.is-selected .ledger-radio-right::after {
  opacity: 1;
}

.ledger-option .ledger-network-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.ledger-net-tron {
  background: #ff5b45;
}

.ledger-net-eth {
  background: #627eea;
}

.ledger-net-btt {
  background: #23242a;
}

.ledger-net-bsc {
  background: #f3ba2f;
}

.ledger-network-name {
  font-size: 14px;
  color: #111;
}

.ledger-check {
  margin-left: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid transparent;
}

.ledger-card-evm.is-selected .ledger-check {
  border-color: #111;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}

.ledger-continue {
  display: block;
  width: 100%;
  margin-top: auto;
  height: 44px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  background: #e4e4ea;
  color: #777;
}

.ledger-continue:not(:disabled) {
  background: #111822;
  color: #fff;
}

.ledger-evm-tooltip {
  position: fixed;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  max-width: 320px;
  background: #373b45;
  color: #fff;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  z-index: 1000;
}

.ledger-evm-tooltip[hidden] {
  display: none !important;
}

.ledger-evm-tooltip-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

/* Ширина = серый блок. Высота не выходит за него — тень строго внутри */
.button-overlay {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  height: 156px;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
  border-radius: 12px;
  contain: layout paint;
}

.button-overlay .btn-row {
  pointer-events: auto;
}

/* 3 равные части по ширине серого блока, затемнение не вылезает вверх/вниз */
.btn-row {
  flex: 1;
  min-height: 0;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 0.12s ease;
  font-size: 0;
  box-shadow: none;
  outline: none;
}

.btn-row:hover {
  background: rgba(0, 0, 0, 0.07);
}

.btn-row:active {
  background: rgba(0, 0, 0, 0.1);
}

/* User Agreement modal: серая полоска сверху в 3 раза больше, темнее; панель ниже */
.agreement-overlay {
  position: fixed;
  inset: 0;
  background: #6e6e6e;
  z-index: 100;
  display: flex;
  flex-direction: column;
  padding-top: 84px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.agreement-overlay[hidden] {
  display: none;
}

.agreement-panel {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.agreement-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  min-height: 44px;
}

.agreement-back {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 0;
  color: #1a1a1a;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement-back svg {
  width: 20px;
  height: 20px;
  stroke-width: 2.2;
}

.agreement-back:hover {
  background: rgba(0,0,0,0.06);
}

.agreement-title {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
}

.agreement-external {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s;
}

.agreement-external svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

.agreement-external:hover {
  background: rgba(0,0,0,0.06);
}

.agreement-body-wrap {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.agreement-iframe {
  width: 100%;
  height: 100%;
  min-height: 200px;
  border: none;
  display: block;
  overflow: hidden;
}

.agreement-footer {
  flex-shrink: 0;
  padding: 12px 16px 16px;
  background: #fff;
  border-top: 1px solid #eee;
}

.agreement-scroll-hint {
  margin: 0 0 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: #666;
  background: #f5f5f5;
  border-radius: 8px;
  text-align: center;
}

.agreement-scroll-hint[hidden] {
  display: none;
}

.agreement-accept {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: #1a1a1a;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.agreement-accept:hover {
  background: #333;
}

.agreement-accept[hidden] {
  display: none;
}

/* Ledger terms overlay (before Ledger info screen) */
.ledger-terms-overlay {
  position: fixed;
  inset: 0;
  background: #6e6e6e;
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding-top: 84px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.ledger-terms-overlay[hidden] {
  display: none;
}

.ledger-terms-panel {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ledger-terms-header .import-title {
  font-size: 18px;
  font-weight: 600;
}

.ledger-terms-header .import-back svg {
  stroke-width: 2.2;
}

.ledger-terms-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 20px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.ledger-terms-body::-webkit-scrollbar {
  display: none;
}

.ledger-terms-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #444;
}

.ledger-terms-text + .ledger-terms-text {
  margin-top: 10px;
}

.ledger-terms-footer {
  flex-shrink: 0;
  padding: 0 20px 16px;
  background: #fff;
}

.ledger-terms-continue {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: none;
  background: #111822;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.ledger-terms-continue:hover {
  background: #232b3a;
}

/* Ledger recovery screen (UI like Import) */
.ledger-recovery-screen {
  position: fixed;
  inset: 0;
  z-index: 85;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ledger-recovery-screen[hidden] {
  display: none !important;
}

.ledger-recovery-screen .import-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.ledger-recovery-screen .import-back {
  color: #1a1a1a;
}

.ledger-recovery-screen .import-back svg {
  stroke-width: 2.2;
}

.ledger-recovery-desc {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #555;
}

/* Ledger info screen (inside popup) */
.ledger-info-screen {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #fff;
  display: flex;
  flex-direction: column;
}

.ledger-info-screen[hidden] {
  display: none !important;
}

.ledger-info-body {
  flex: 1;
  min-height: 0;
  padding: 16px 20px 12px;
  overflow-y: auto;
}

.ledger-info-wordmark {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 6px auto 14px;
}

.ledger-info-title {
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

/* Ledger header should match Import/Create */
.ledger-info-screen .import-title {
  font-size: 18px;
  font-weight: 600;
}

.ledger-info-screen .import-back svg {
  stroke-width: 2.2;
}

.ledger-info-text {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.5;
  color: #444;
}

.ledger-info-url {
  margin: 0 0 10px;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #111;
  padding: 6px 8px;
  border-radius: 8px;
  background: #f4f4f8;
  word-break: break-all;
}

.ledger-info-footer {
  padding: 0 20px 16px;
}

.ledger-info-continue {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: none;
  background: #111822;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.ledger-info-continue:hover {
  background: #232b3a;
}

/* Import Wallet screen */
.import-wallet-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.import-wallet-screen[hidden] {
  display: none;
}

.import-wallet-screen .import-title {
  font-size: 18px;
  font-weight: 600;
}

.import-wallet-screen .import-back svg {
  stroke-width: 2.2;
}

.import-step1,
.import-step2 {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.import-step1[hidden],
.import-step2[hidden] {
  display: none !important;
}

.import-step1 .import-body,
.import-step2 .import-body-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.import-step2 .import-body-scroll::-webkit-scrollbar {
  display: none;
}

/* Create HD Wallet screen */
.create-wallet-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.create-wallet-screen[hidden] {
  display: none;
}

/* Скрыть шапку "Create HD Wallet", когда показан успех или любой экран бэкапа — остаётся только "Back Up Mnemonic" */
.create-wallet-screen.backup-flow > header.import-header {
  display: none !important;
}

.create-wallet-screen .import-title {
  font-size: 18px;
  font-weight: 600;
}

.create-wallet-screen .import-back svg {
  stroke-width: 2.2;
}

.create-wallet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  padding-top: 8px;
  padding-bottom: 20px;
}

.create-wallet-desc {
  list-style: none;
  padding-left: 0;
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: #555;
}

.create-wallet-desc li {
  margin-bottom: 8px;
}

.create-wallet-desc li:last-child {
  margin-bottom: 0;
}

.create-wallet-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 400;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.create-wallet-btn:disabled {
  background: #e8e8e8;
  color: #777;
  cursor: not-allowed;
}

.create-wallet-btn:not(:disabled) {
  background: #1a1a1a;
  color: #fff;
}

.create-wallet-btn:not(:disabled):hover {
  background: #333;
}

/* Create loading overlay (2s) */
.create-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 120;
  background: rgba(255, 255, 255, 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-loading-overlay[hidden] {
  display: none !important;
}

.create-loading-modal {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(52, 56, 67, 0.92);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-loading-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.28);
  border-top-color: #fff;
  animation: createSpin 0.9s linear infinite;
  box-sizing: border-box;
}

@keyframes createSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Create success view — скрин 1:1, кнопка по точному bounding box */
.create-success-view {
  position: absolute;
  inset: 0;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.create-success-view[hidden] {
  display: none !important;
}

.create-success-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}

.create-success-header {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
}

.create-success-view .import-title {
  font-size: 18px;
  font-weight: 600;
}

.create-success-view .import-back svg {
  stroke-width: 2.2;
}

/* Back Up Wallet — кликабельная зона = точный bounding box тёмной кнопки (скруглённый прямоугольник внизу) */
.create-success-backup-btn {
  position: absolute;
  bottom: 19px;
  left: 16px;
  right: 16px;
  height: 45px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: none;
  z-index: 2;
}

.create-success-backup-btn:hover {
  background: transparent;
}

/* Back Up Mnemonic screen — как Create/Import по шрифту и отступам */
.backup-mnemonic-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: hidden;
}

.backup-mnemonic-view[hidden] {
  display: none !important;
}

.backup-mnemonic-view .import-title {
  font-size: 18px;
  font-weight: 600;
  color: #1a1a1a;
}

.backup-mnemonic-view .import-back svg {
  stroke-width: 2.2;
}

.backup-mnemonic-header {
  flex-shrink: 0;
}

.backup-mnemonic-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 20px 20px;
}

/* Под заголовком — маленький отступ, потом текст Please write... */
.backup-mnemonic-desc {
  margin: 0 0 2em;
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
}

/* 2 строки отступа, потом гифка на белом фоне */
.backup-mnemonic-gif-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 1em;
  min-height: 240px;
  background: #fff;
  overflow: visible;
}

.backup-mnemonic-gif {
  max-width: 100%;
  max-height: 298px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

/* После гифки — отступ 1 строка, тот же шрифт */
.backup-mnemonic-warn {
  margin: 0.5em 0 1em;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

/* Ниже — кнопка Back Up */
.backup-mnemonic-footer {
  flex-shrink: 0;
  padding: 0 20px 24px;
}

.backup-mnemonic-btn {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: #1a2332;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-sizing: border-box;
}

.backup-mnemonic-btn:hover {
  background: #252f42;
}

/* Back Up Mnemonic step 2 — без скролла, окошко с камерой и текстом */
.backup-mnemonic-view-2 .backup-mnemonic-body-2 {
  padding: 8px 20px 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.backup-mnemonic-view-2 .backup-mnemonic-spacing-top {
  margin-top: auto;
}

.backup-mnemonic-desc-2 {
  font-size: 13px;
  margin-bottom: 1em;
  line-height: 1.4;
  white-space: normal;
}

.backup-mnemonic-hidden-wrap {
  width: 100%;
  max-width: 320px;
  min-height: 345px;
  margin: 0 auto;
  padding: 28px 20px 28px;
  border-radius: 12px;
  background: #f4f4f8; /* подложка под камеру как в оригинале */
  box-shadow: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  box-sizing: border-box;
}

.backup-mnemonic-no-screenshot {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.backup-camera-img {
  display: block;
  width: auto;
  height: auto;
  max-width: 94px;
  max-height: 94px;
  object-fit: contain;
}

.backup-mnemonic-hidden-wrap .backup-mnemonic-view2-text {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #666;
  text-align: center;
  max-width: 280px;
}

.backup-mnemonic-hidden-wrap .backup-mnemonic-btn-view {
  width: 68%;
  max-width: 224px;
  margin-top: 4px;
}

.backup-mnemonic-footer-inline {
  margin-bottom: 0;
}

.backup-mnemonic-view-2 .backup-mnemonic-spacing-top {
  margin-top: auto;
  margin-bottom: 0.75em;
}

.backup-mnemonic-btn-view {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 20px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: #1a1a1a;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: none;
}

.backup-mnemonic-btn-view:hover {
  background: #333;
}

.backup-mnemonic-view-2 .backup-mnemonic-screenshot-warn {
  margin-top: auto;
  margin-bottom: 0.75em;
}

.backup-mnemonic-screenshot-warn {
  margin: 1em 0 1em;
  font-size: 12px;
  line-height: 1.45;
  color: #666;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.backup-mnemonic-screenshot-warn-text {
  flex: 1;
  max-width: 280px;
}

.backup-mnemonic-warn-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
}

.backup-mnemonic-btn-already {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  background: #e8e8e8;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: none;
}

.backup-mnemonic-btn-already:hover {
  background: #ddd;
}

/* На экране с 12 словами кнопка «Already Backed Up» сразу чёрная */
.backup-mnemonic-view-3 .backup-mnemonic-btn-already {
  color: #fff;
  background: #1a1a1a;
}

.backup-mnemonic-view-3 .backup-mnemonic-btn-already:hover {
  background: #333;
}

/* Back Up Mnemonic step 3 — 12 words grid, Copy/QR, info block */
.backup-mnemonic-view-3 {
  position: relative;
}
.backup-mnemonic-view-3 .backup-mnemonic-body-3 {
  padding: 8px 20px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.backup-mnemonic-view-3 .backup-mnemonic-desc-2 {
  margin-bottom: 1em;
  flex-shrink: 0;
  color: #000;
}

.backup-mnemonic-view-3 .backup-mnemonic-grid {
  flex-shrink: 0;
}

.backup-mnemonic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 10px;
  margin-bottom: 16px;
}

.backup-mnemonic-cell {
  position: relative;
  background: #f4f4f8;
  border-radius: 10px;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 8px;
}

.backup-mnemonic-cell-num {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 52px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.06);
  pointer-events: none;
  line-height: 1;
}

.backup-mnemonic-cell-word {
  position: relative;
  z-index: 1;
  font-size: 15px;
  font-weight: 500;
  color: #1a1a1a;
  text-align: center;
  word-break: break-all;
}

/* На экране Verify Mnemonic скрываем слова в сетке 12 слов (видны только цифры) */
.create-wallet-screen.verifying .backup-mnemonic-view-3 .backup-mnemonic-cell-word {
  display: none;
}

.backup-mnemonic-copy-qr {
  display: flex;
  width: 100%;
  background: #f4f4f8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.backup-copy-half,
.backup-qr-half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #1a1a1a;
  background: transparent;
  border: none;
  cursor: pointer;
}

.backup-copy-icon {
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Crect x='9' y='9' width='13' height='13' rx='2'/%3E%3Cpath d='M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1'/%3E%3C/svg%3E") center/contain no-repeat;
  display: inline-block;
}

.backup-qr-icon {
  width: 18px;
  height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='3' height='3'/%3E%3Crect x='19' y='14' width='2' height='2'/%3E%3Crect x='14' y='19' width='2' height='2'/%3E%3Crect x='19' y='19' width='2' height='2'/%3E%3C/svg%3E") center/contain no-repeat;
  display: inline-block;
}

.backup-mnemonic-info-scroll {
  background: #f4f4f8;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
  flex: 1;
  min-height: 80px;
  max-height: 140px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.backup-mnemonic-info-scroll::-webkit-scrollbar {
  display: none;
}

.backup-mnemonic-info-scroll p {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.5;
  color: #333;
}

.backup-mnemonic-info-scroll p:last-child {
  margin-bottom: 0;
}

.backup-mnemonic-view-3 .backup-mnemonic-footer-inline {
  flex-shrink: 0;
}

/* Verify Mnemonic screen */
.verify-mnemonic-view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.verify-mnemonic-view[hidden] {
  display: none !important;
}

.verify-view-btn {
  margin-left: auto;
  margin-right: 16px;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  background: transparent;
  border: none;
  cursor: default;
}

.verify-mnemonic-body {
  flex: 1;
  min-height: 0;
  padding: 8px 20px 20px;
}

.verify-mnemonic-step {
  margin: 0 0 12px;
  font-size: 13px;
  color: #111;
}

.verify-mnemonic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.verify-mnemonic-cell {
  background: #f5f5f8;
  border-radius: 10px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 500;
  color: #b0b0c0;
}

.verify-mnemonic-cell.active {
  background: #f5f5f8;
  color: #111;
  font-weight: 700;
  font-size: 20px;
}

.verify-mnemonic-prompt {
  margin: 0 0 10px;
  font-size: 13px;
  color: #111;
}

.verify-mnemonic-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 10px;
}

.verify-mnemonic-option-btn {
  border-radius: 10px;
  border: none;
  padding: 10px 8px;
  font-size: 13px;
  font-weight: 500;
  color: #6b6b80;
  background: #f5f5f8;
  cursor: pointer;
}

.verify-mnemonic-option-btn.selected {
  background: #111822;
  color: #fff;
}

.verify-mnemonic-footer {
  padding: 0 20px 16px;
}

.verify-mnemonic-next {
  width: 100%;
  height: 40px;
  border-radius: 12px;
  border: none;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  background: #d8d8de;
  color: #fff;
}

.verify-mnemonic-next:not(:disabled) {
  background: #111822;
}

.verify-failed-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 60;
}

.verify-failed-overlay[hidden] {
  display: none !important;
}

.verify-failed-modal {
  background: #343843;
  border-radius: 16px;
  padding: 20px 28px;
  max-width: 260px;
  width: 80%;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.verify-failed-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='8' y1='8' x2='16' y2='16'/%3E%3Cline x1='16' y1='8' x2='8' y2='16'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}

.verify-failed-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}

.verify-success-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  z-index: 60;
}

.verify-success-overlay[hidden] {
  display: none !important;
}

.verify-success-modal {
  background: #343843;
  border-radius: 16px;
  padding: 20px 28px;
  max-width: 260px;
  width: 80%;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.verify-success-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/18px 18px no-repeat;
}

.verify-success-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}

/* Post-verify update notice */
.tronlink-update-overlay {
  position: fixed;
  inset: 0;
  background: #6e6e6e;
  z-index: 95;
  display: flex;
  flex-direction: column;
  padding-top: 84px;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

.tronlink-update-overlay[hidden] {
  display: none !important;
}

.tronlink-update-panel {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  background: #fff;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tronlink-update-header .import-title {
  font-size: 18px;
  font-weight: 600;
}

.tronlink-update-header .import-back svg {
  stroke-width: 2.2;
}

.tronlink-update-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 20px 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tronlink-update-body::-webkit-scrollbar {
  display: none;
}

.tronlink-update-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: #444;
}

.tronlink-update-text + .tronlink-update-text {
  margin-top: 8px;
}

.tronlink-update-url + .tronlink-update-text {
  margin-top: 10px;
}

.tronlink-update-salutation {
  color: #111;
  font-weight: 600;
  margin-top: 2px;
}

.tronlink-update-subhead {
  color: #111;
  font-weight: 600;
}

.tronlink-update-signature {
  color: #111;
  font-weight: 600;
  margin-top: 12px;
}

.tronlink-update-strong {
  font-weight: 600;
  color: #111;
}

.tronlink-update-url {
  margin: 10px 0 0;
  font-size: 13px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #111;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f4f4f8;
  word-break: break-all;
}

.tronlink-update-footer {
  flex-shrink: 0;
  padding: 0 20px 16px;
  background: #fff;
}

.tronlink-update-btn {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: none;
  background: #111822;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.tronlink-update-btn:active {
  opacity: 0.92;
}

/* Copied popup overlay */
.backup-copied-popup {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #34383d;
  border-radius: 12px;
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

.backup-copied-popup[hidden] {
  display: none !important;
}

.backup-copied-check {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/20px 20px no-repeat;
}

.backup-copied-text {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

/* Mnemonic QR Code modal */
.backup-qr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.backup-qr-modal-overlay[hidden] {
  display: none !important;
}

.backup-qr-modal {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

.backup-qr-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  text-align: center;
  margin: 0 0 20px;
}

.backup-qr-modal-code-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  margin-bottom: 20px;
}

.backup-qr-modal-code-wrap canvas,
.backup-qr-modal-code-wrap img {
  max-width: 100%;
  height: auto;
}

.backup-qr-modal-close {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: #1a1a1a;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.backup-qr-modal-close:hover {
  background: #333;
}

/* Authentication modal */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.auth-modal-overlay[hidden] {
  display: none !important;
}

.auth-modal {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border-radius: 12px 12px 0 0;
  padding: 20px 20px 24px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
}

.auth-modal-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 20px;
}

.auth-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
}

.auth-modal-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  color: #666;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-modal-close:hover {
  color: #1a1a1a;
}

.auth-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-modal-password-wrap {
  position: relative;
}

.auth-modal-password-input {
  width: 100%;
  padding: 12px 44px 12px 12px;
  font-size: 14px;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-family: inherit;
  box-sizing: border-box;
}

.auth-modal-password-input::placeholder {
  color: #999;
}

.auth-modal-password-input:hover,
.auth-modal-password-input:focus {
  outline: none;
  border-color: #1a1a1a;
}

.auth-modal-password-input.has-error {
  border-color: #d32f2f;
}

.auth-modal-password-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.auth-modal-password-eye:hover {
  color: #333;
  background: rgba(0,0,0,0.06);
}

.auth-modal-password-eye svg {
  width: 20px;
  height: 20px;
}

.auth-modal-password-eye .eye-icon {
  display: none;
}

.auth-modal-password-eye .eye-off-icon {
  display: block;
}

.auth-modal-password-eye.showing .eye-icon {
  display: block;
}

.auth-modal-password-eye.showing .eye-off-icon {
  display: none;
}

.auth-modal-error {
  margin: 0;
  font-size: 13px;
  color: #d32f2f;
  min-height: 18px;
}

.auth-modal-confirm {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  background: #bdbdbd;
  border: none;
  border-radius: 10px;
  cursor: not-allowed;
  transition: background 0.2s;
}

.auth-modal-confirm:not(:disabled) {
  background: #1a2332;
  cursor: pointer;
}

.auth-modal-confirm:not(:disabled):hover {
  background: #252f42;
}

.import-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  min-height: 48px;
}

.import-back {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 8px;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.import-back svg {
  width: 20px;
  height: 20px;
}

.import-back:hover {
  background: rgba(0,0,0,0.06);
}

.import-title {
  font-size: 16px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 0 8px;
}

.import-body {
  flex: 1;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
}

.import-footer {
  flex-shrink: 0;
  padding: 16px;
  background: #fff;
  text-align: center;
}

.import-input-wrap {
  position: relative;
  margin-bottom: 8px;
}

.import-mnemonic {
  width: 100%;
  min-height: 96px;
  padding: 12px 40px 12px 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  resize: none;
  font-family: inherit;
  display: block;
  box-sizing: border-box;
}

.import-mnemonic::placeholder {
  color: #999;
}

.import-mnemonic:hover,
.import-mnemonic:focus {
  outline: none;
  border-color: #1a1a1a;
}

.import-clear {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.import-clear:hover {
  color: #666;
  background: rgba(0,0,0,0.06);
}

.import-clear svg {
  width: 16px;
  height: 16px;
}

.import-clear[hidden] {
  display: none !important;
}

.import-error {
  color: #c00;
  font-size: 13px;
  margin: 0 0 10px;
  min-height: 20px;
}

.import-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  min-height: 32px;
}

.import-suggestion {
  padding: 6px 10px;
  font-size: 13px;
  color: #1a1a1a;
  background: #f0f0f0;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}

.import-suggestion:hover {
  background: #e0e0e0;
}

.import-next {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 400;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 10px;
}

.import-next:disabled {
  background: #e8e8e8;
  color: #999;
  cursor: not-allowed;
}

.import-next:not(:disabled) {
  background: #1a1a1a;
  color: #fff;
}

.import-next:not(:disabled):hover {
  background: #333;
}

.import-keystore {
  font-size: 13px;
  color: #2196f3;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin-top: 4px;
}

.import-keystore:hover {
  text-decoration: none;
}

.import-help-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.import-keystore-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  min-width: 180px;
  max-width: 240px;
  width: max-content;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.4;
  color: #fff;
  background: #4a4a4a;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  white-space: normal;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.15s, visibility 0.15s;
  z-index: 100;
  pointer-events: none;
  text-align: center;
}

.import-help-wrap:hover .import-keystore-tooltip {
  visibility: visible;
  opacity: 1;
}

.import-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 11px;
  color: #2196f3;
  border: 1px solid #2196f3;
  border-radius: 50%;
}

/* Import Wallet — Step 2 */
.import-step2 .import-body-scroll {
  padding-top: 8px;
  padding-bottom: 12px;
}

.import-step2-desc {
  font-size: 13px;
  color: #555;
  margin: 0 0 16px;
  line-height: 1.45;
}

.import-link {
  color: #1565c0;
  text-decoration: none;
}

.import-link:hover {
  text-decoration: underline;
}

.import-link-underline {
  text-decoration: underline;
}

.import-evm-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 150;
  max-width: 300px;
  padding: 14px 16px;
  font-size: 12px;
  line-height: 1.45;
  color: #fff;
  background: #4a4a4a;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
  pointer-events: none;
}

.import-evm-popup[hidden] {
  display: none !important;
}

.import-evm-popup-text {
  margin: 0;
}

.import-field {
  margin-bottom: 16px;
}

.import-label {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 6px;
}

.import-mnemonic-display {
  width: 100%;
  min-height: 72px;
  padding: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #1a1a1a;
  background: #fafafa;
  border: 1px solid #ddd;
  border-radius: 10px;
  resize: none;
  font-family: inherit;
  display: block;
  box-sizing: border-box;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.import-mnemonic-display::-webkit-scrollbar {
  display: none;
}

.import-mnemonic-display:hover,
.import-mnemonic-display:focus {
  outline: none;
  border-color: #1a1a1a;
}

.import-text-wrap,
.import-password-wrap {
  position: relative;
}

.import-text,
.import-password {
  width: 100%;
  padding: 12px 36px 12px 12px;
  font-size: 14px;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-family: inherit;
  box-sizing: border-box;
}

.import-text::placeholder,
.import-password::placeholder {
  color: #777;
}

.import-text:hover,
.import-text:focus,
.import-password:hover,
.import-password:focus {
  outline: none;
  border-color: #1a1a1a;
}

.import-text-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.import-text-clear:hover {
  color: #666;
  background: rgba(0,0,0,0.06);
}

.import-text-clear[hidden] {
  display: none !important;
}

.import-password-hint {
  font-size: 12px;
  color: #555;
  margin: 0 0 8px;
  line-height: 1.4;
}

.import-password-wrap .import-password {
  padding-right: 44px;
}

.import-password-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.import-password-eye:hover {
  color: #333;
  background: rgba(0,0,0,0.06);
}

.import-password-eye svg {
  width: 16px;
  height: 16px;
}

.import-password-eye .eye-icon {
  display: none;
}

.import-password-eye .eye-off-icon {
  display: block;
}

.import-password-eye.showing .eye-icon {
  display: block;
}

.import-password-eye.showing .eye-off-icon {
  display: none;
}

.import-password-criteria {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  font-size: 12px;
  color: #1a1a1a;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}

.import-criterion {
  display: flex;
  align-items: center;
  gap: 6px;
}

.import-criterion-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #bbb;
  background: #e0e0e0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
  flex-shrink: 0;
}

.import-criterion.met .import-criterion-icon {
  background: #1a1a1a;
  border-color: #1a1a1a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px;
  background-position: center;
}

.import-password-match-error {
  color: #c00;
  font-size: 13px;
  margin: 6px 0 0;
}

.import-gasfree {
  margin-top: 16px;
  margin-bottom: 0;
}

.import-step2 .import-footer {
  padding-top: 8px;
  padding-bottom: 16px;
}

.import-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #1a1a1a;
  line-height: 1.45;
}

.import-checkbox {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: #1a1a1a;
  cursor: pointer;
}

.import-checkbox-text {
  flex: 1;
}

.import-mnemonic-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 400;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  margin-bottom: 10px;
}

.import-mnemonic-btn:disabled {
  background: #e8e8e8;
  color: #777;
  cursor: not-allowed;
}

.import-mnemonic-btn:not(:disabled) {
  background: #1a1a1a;
  color: #fff;
}

.import-mnemonic-btn:not(:disabled):hover {
  background: #333;
}

.import-keystore-step2 {
  margin-top: 4px;
}

/* GasFree modal & EVM tooltip */

/* Import wallet success screen */
.import-success-view {
  position: absolute;
  inset: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.import-success-view[hidden] {
  display: none !important;
}

.import-success-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px 16px;
  text-align: center;
}

.import-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #21c45a;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.import-success-icon::before {
  content: '';
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  display: block;
}

.import-success-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: #111;
}

.import-success-sub {
  margin: 0 0 18px;
  font-size: 13px;
  color: #666;
}

.import-success-networks {
  display: flex;
  gap: 10px;
}

.import-success-net {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.import-success-net-tron {
  background: #ff5b45;
}

.import-success-net-eth {
  background: #627eea;
}

.import-success-net-btt {
  background: #23242a;
}

.import-success-net-bsc {
  background: #f3ba2f;
}

.import-success-footer {
  padding: 0 20px 20px;
}

.import-success-confirm {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 19px;
  height: 45px;
  width: auto;
  border-radius: 12px;
  border: none;
  background: #111822;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  z-index: 2;
}

.import-success-confirm:active {
  opacity: 0.9;
}
.import-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.import-modal-overlay[hidden] {
  display: none;
}

.import-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 340px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.import-modal-gasfree {
  width: 320px;
  max-width: calc(100vw - 40px);
  padding: 20px 20px 0;
  box-sizing: border-box;
}

.import-modal-gasfree-title {
  font-size: 16px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 16px;
  text-align: center;
}

.import-modal-gasfree-q {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  font-size: 14px;
  color: #555;
  text-align: center;
  line-height: 18px;
  border: 1px solid #bbb;
  border-radius: 50%;
}

.import-modal-gasfree-card {
  background: #f0f0f0;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
}

.import-modal-gasfree-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #555;
  margin-bottom: 10px;
}

.import-modal-gasfree-addr {
  font-family: monospace;
  font-size: 12px;
  color: #666;
}

.import-modal-gasfree-balance {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 12px;
}

.import-modal-gasfree-actions {
  display: flex;
  gap: 10px;
}

.import-modal-gasfree-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 13px;
  color: #1a1a1a;
  background: #e5e5e5;
  border-radius: 8px;
  text-align: center;
  display: block;
}

.import-modal-gasfree-features {
  margin-bottom: 20px;
}

.import-modal-gasfree-feature {
  margin-bottom: 14px;
}

.import-modal-gasfree-feature:last-child {
  margin-bottom: 0;
}

.import-modal-gasfree-ft {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.import-modal-gasfree-fd {
  font-size: 12px;
  color: #555;
  margin: 0;
  line-height: 1.4;
  font-weight: 400;
}

.import-modal-gasfree .import-modal-gotit {
  display: block;
  width: 100%;
  margin: 0 -20px 0 -20px;
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  background: #1a1a1a;
  border: none;
  border-radius: 0;
  cursor: pointer;
  box-sizing: content-box;
}

.import-modal-gasfree .import-modal-gotit {
  border-radius: 0 0 12px 12px;
}

.import-modal-gasfree .import-modal-gotit:hover {
  background: #333;
}

/* Keystore password modal */
.keystore-password-overlay[hidden] {
  display: none;
}

.keystore-password-modal {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  width: 300px;
  max-width: calc(100vw - 40px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.keystore-password-title {
  font-size: 16px;
  font-weight: 400;
  color: #1a1a1a;
  margin: 0 0 16px;
  text-align: center;
}

.keystore-password-wrap {
  position: relative;
  margin-bottom: 20px;
}

.keystore-password-input {
  width: 100%;
  padding: 12px 44px 12px 12px;
  font-size: 14px;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-family: inherit;
  box-sizing: border-box;
}

.keystore-password-input::placeholder {
  color: #999;
}

.keystore-password-input:hover,
.keystore-password-input:focus {
  outline: none;
  border-color: #1a1a1a;
}

.keystore-password-eye {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.keystore-password-eye:hover {
  color: #333;
  background: rgba(0,0,0,0.06);
}

.keystore-password-eye svg {
  width: 20px;
  height: 20px;
}

.keystore-password-eye .eye-icon {
  display: block;
}

.keystore-password-eye .eye-off-icon {
  display: none;
}

.keystore-password-eye.showing .eye-icon {
  display: none;
}

.keystore-password-eye.showing .eye-off-icon {
  display: block;
}

.keystore-password-next {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  background: #1a1a1a;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}

.keystore-password-next:hover {
  background: #333;
}