/* ===== Design tokens ===== */
:root {
  /* Backgrounds */
  --bg-primary: #0a0f14;
  --bg-card: #111921;
  --bg-input: #1a2535;
  --bg-modal: #151e28;
  --bg-elevated: rgb(255, 255, 255, 0.03);
  --bg-elevated-hover: rgb(255, 255, 255, 0.06);

  /* Text — contrast ratios measured against --bg-primary (#0a0f14) */
  --text-primary: #e8edf2;        /* ~14.5:1 */
  --text-secondary: #94a3b8;      /* ~6.3:1  — was #8a9bb0 */
  --text-tertiary: #8294a7;       /* ~4.8:1  — was #5a6d82 (~2.0:1) */
  --text-placeholder: #6b7f94;    /* ~3.3:1  — acceptable for placeholder hints */
  --text-dim: #5a6d82;            /* ~2.4:1  — decorative only, never for readable text */
  --text-bright: #c8d6e5;         /* ~10.2:1 */

  /* Accent */
  --accent: #38e3ac;
  --accent-hover: #2bb88a;
  --accent-subtle: rgb(56, 227, 172, 0.08);
  --accent-muted: rgb(56, 227, 172, 0.15);

  /* Status */
  --color-success: #68d391;
  --color-error: #ff6b6b;
  --color-warning: #d4a844;       /* was #c4a73a — slightly brighter */

  /* Borders */
  --border-subtle: rgb(255, 255, 255, 0.06);
  --border-accent: rgb(56, 227, 172, 0.1);
}

/* ===== Reduced-motion preference ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgb(56, 227, 172, 0.25) transparent;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(56, 227, 172, 0.25);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(56, 227, 172, 0.45);
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100dvh;
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;

  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.page {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.page:not(.hidden) {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.card {
  background: var(--bg-card);
  border: 1px solid rgb(56, 227, 172, 0.08);
  padding: 32px;
  border-radius: 18px;
  width: 100%;
  max-width: 420px;
  text-align: center;
}

h1, .view-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.4rem;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}

h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.15rem;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--accent);
  margin: 0 0 8px;
}

/* ===== Form elements ===== */
label {
  display: block;
  text-align: left;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
  margin-top: 8px;
}

input, button {
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: none;
  font-size: 16px;
}

input {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid rgb(56, 227, 172, 0.1);
}

input::placeholder {
  color: var(--text-placeholder);
}

input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

select {
  display: block;
  width: 100%;
  padding: 14px;
  padding-right: 40px;
  margin-bottom: 12px;
  border-radius: 10px;
  font-size: 16px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid rgb(56, 227, 172, 0.1);
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238294a7' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

select:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

input[type="date"] {
  color-scheme: dark;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 48px;
  padding: 10px 14px;
  box-sizing: border-box;
}

button {
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, background 0.2s;
}

button:active {
  opacity: 0.85;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Anchor styled as a primary button — kept for click-to-chat
   external links where a real <a target="_blank"> beats a JS popup.
   iOS Safari leaves the popup-then-replace pattern at about:blank
   when wa.me triggers the universal link; a native <a> avoids it. */
.btn-link {
  display: block;
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: none;
  font-size: 16px;
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: opacity 0.15s, background 0.2s;
}

.btn-link:active {
  opacity: 0.85;
}

.btn-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (hover: hover) {
  button:hover:not(:disabled) {
    opacity: 0.9;
    filter: brightness(1.05);
  }
  .secondary:hover:not(:disabled) {
    background: rgb(56, 227, 172, 0.1);
  }
  .btn-link:hover {
    opacity: 0.9;
    filter: brightness(1.05);
  }
}

.secondary {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
}

.hidden {
  display: none !important;
}

.mensagem {
  color: var(--color-error);
  font-size: 14px;
}

.mensagem:not(:empty) {
  margin: 8px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgb(255, 107, 107, 0.1);
  border-left: 3px solid var(--color-error);
  text-align: left;
  line-height: 1.4;
}

.mensagem.success {
  color: var(--color-success);
}

.mensagem.success:not(:empty) {
  background: rgb(104, 211, 145, 0.1);
  border-left-color: var(--color-success);
}

.mensagem.info {
  color: var(--text-secondary);
}

.mensagem.info:not(:empty) {
  background: rgb(79, 209, 197, 0.08);
  border-left-color: var(--accent);
}

/* ===== Spinner ===== */
.spinner {
  display: inline-block;
  width: 24px;
  height: 24px;
  border: 3px solid rgb(56, 227, 172, 0.3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: middle;
  margin-right: 8px;
}

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

#loading, #loadingSaque {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 15px;
  color: var(--text-secondary);
}

/* ===== Copy success ===== */
.copy-success {
  background: var(--color-success) !important;
  color: var(--bg-primary) !important;
}

/* ===== Links ===== */
.link-text {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

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

.info-text {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 16px;
}

/* ===== Code input (verification) ===== */
.code-input {
  font-size: 28px;
  letter-spacing: 8px;
  text-align: center;
  font-weight: bold;
}

/* ===== Header bar (home) ===== */
.header-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.icon-btn {
  width: auto;
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  color: var(--text-primary);
  font-size: 22px;
  padding: 8px 12px;
  margin-bottom: 0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-btn:active {
  background: rgb(255, 255, 255, 0.1);
}

.addr-chip {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--accent);
  background: rgb(56, 227, 172, 0.08);
  padding: 6px 12px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

/* ===== Empty state ===== */
.empty-state {
  padding: 20px 0;
}

.empty-icon {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-state h2 {
  margin-bottom: 8px;
}

.store-badges {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 16px;
  flex-wrap: wrap;
}

.store-badge {
  display: inline-flex;
  text-decoration: none;
  border-radius: 8px;
  background: rgb(255,255,255,0.06);
  border: 1px solid rgb(255,255,255,0.1);
  overflow: hidden;
  transition: transform 0.15s, background 0.15s;
}

.store-badge svg {
  display: block;
}

.store-badge:hover {
  transform: scale(1.03);
  background: rgb(255,255,255,0.1);
}

/* ===== Saque Warning ===== */
.qr-error {
  text-align: center;
  color: var(--color-error);
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 12px 16px;
  margin: 12px 0;
  background: rgb(255, 107, 107, 0.1);
  border: 1px solid rgb(255, 107, 107, 0.3);
  border-radius: 10px;
}

.saque-warning-icon {
  vertical-align: -2px;
  margin-right: 3px;
  stroke: var(--color-warning);
}

.saque-warning {
  text-align: center;
  color: var(--color-warning);
  background: rgb(196, 167, 58, 0.08);
  border: 1px solid rgb(196, 167, 58, 0.2);
  border-radius: 8px;
  padding: 8px 12px;
  margin: 6px 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.45;
}

/* ===== Switch base (used by valor mode switch) ===== */
.switch-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  user-select: none;
  -webkit-user-select: none;
}

.switch-track {
  position: relative;
  width: 48px;
  height: 26px;
  background: rgb(255, 255, 255, 0.15);
  border-radius: 999px;
  transition: background 0.25s ease;
  flex-shrink: 0;
}

.switch-track.active {
  background: var(--accent);
}

.switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s ease;
}

.switch-track.active .switch-thumb {
  transform: translateX(22px);
}

/* ===== Valor mode switch (small, for saque) ===== */
/* PIX key disambiguation pills */
.pix-disambig {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin 0.3s ease;
  margin: 0;
}

.pix-disambig:not(.hidden) {
  max-height: 80px;
  opacity: 1;
  margin: 10px 0 4px;
}

.pix-disambig-label {
  display: block;
  font-size: 13px;
  color: rgb(255, 255, 255, 0.7);
  margin-bottom: 8px;
}

.pix-disambig-pills {
  display: flex;
  gap: 10px;
}

.pix-disambig-pill {
  flex: 1;
  padding: 10px 16px;
  border: 1.5px solid rgb(79, 209, 197, 0.35);
  border-radius: 10px;
  background: rgb(79, 209, 197, 0.08);
  color: rgb(255, 255, 255, 0.85);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.pix-disambig-pill:hover {
  background: rgb(79, 209, 197, 0.18);
  border-color: rgb(79, 209, 197, 0.55);
}

.pix-disambig-pill.active {
  background: #4fd1c5;
  color: #0a2626;
  border-color: #4fd1c5;
}

/* ===== Tax-number row (CPF/CNPJ titular at withdraw) ===== */
.tax-number-row {
  margin: 0;
}

.tax-number-row.hidden {
  display: none;
}

.tax-number-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tax-number-help {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-bottom: 0;
}

.valor-mode-switch {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.small-switch {
  justify-content: flex-start;
  font-size: 14px;
  gap: 8px;
}

.small-switch .switch-track {
  width: 40px;
  height: 22px;
}

.small-switch .switch-thumb {
  width: 16px;
  height: 16px;
}

.small-switch .switch-track.active .switch-thumb {
  transform: translateX(18px);
}

.valor-mode-text {
  font-size: 13px;
  opacity: 0.85;
}

.hint {
  font-size: 13px;
  opacity: 0.85;
  margin: 0 0 14px;
  line-height: 1.5;
  text-align: left;
  background: rgb(56, 227, 172, 0.08);
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid rgb(56, 227, 172, 0.4);
}

/* ===== Resultado Saque ===== */
.resultado-titulo {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 14px;
}

.resultado-valores {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  width: 100%;
}

.resultado-item {
  flex: 1;
  background: var(--bg-input);
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.resultado-label {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.resultado-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
}

.resultado-sublabel {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0 0 8px;
}

.address-box {
  background: var(--bg-input);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  word-break: break-all;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
}

.address-text {
  opacity: 0.9;
}

.address-copy-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: min(240px, 65vw);
  margin: 0 auto 16px;
  background: var(--bg-card);
  border: 2px solid rgb(56, 227, 172, 0.2);
  border-radius: 0 0 14px 14px;
  padding: 10px 16px;
  margin-top: -2px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.address-copy-btn:active {
  transform: scale(0.98);
}

.address-copy-btn.copied {
  border-color: var(--accent);
  color: var(--accent);
}

.address-copy-text {
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.address-copy-icon,
.address-copy-check {
  flex-shrink: 0;
  margin-left: 10px;
  color: var(--text-tertiary);
}

.address-copy-btn.copied .address-copy-check {
  color: var(--accent);
}

.qr-hint {
  font-size: 0.8rem;
  color: var(--text-placeholder);
  margin: 16px 0 8px;
  line-height: 1.45;
}

#saqueQr {
  width: 100%;
  max-width: min(240px, 65vw);
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 16px auto 0;
  display: block;
  object-fit: contain;
  border-radius: 14px 14px 0 0;
  border: 2px solid rgb(56, 227, 172, 0.2);
  border-bottom: none;
  box-shadow: 0 0 20px rgb(56, 227, 172, 0.08);
}

/* ===== Resultado (depósito) separator ===== */
.resultado:not(.hidden) {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid rgb(255, 255, 255, 0.1);
}

/* ===== Menu overlay ===== */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
}

.menu-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.menu-panel {
  position: relative;
  width: 280px;
  max-width: 80vw;
  background: var(--bg-card);
  padding: 24px;
  height: 100%;
  overflow-y: auto;
  animation: slideIn 0.2s ease;
}

@keyframes slideIn {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.menu-header h2 {
  margin: 0;
}

.menu-section {
  margin-bottom: 20px;
}

.menu-section h3 {
  font-size: 0.85rem;
  letter-spacing: 0;
  color: var(--text-secondary);
  margin-bottom: 0;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none;
  font-weight: 500;
}

.menu-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: var(--text-tertiary); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.menu-section-toggle {
  cursor: pointer; justify-content: flex-start; user-select: none;
}
.menu-section-toggle::after {
  content: ""; display: inline-block; width: 5px; height: 5px;
  border-right: 1.5px solid var(--text-tertiary); border-bottom: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg); transition: transform 0.2s; flex-shrink: 0;
  margin-left: auto;
}
.menu-section-toggle.open::after { transform: rotate(-135deg); }
.menu-section-toggle:active { opacity: 0.7; }
.menu-section-items { overflow: hidden; padding-left: 26px; }
.menu-section-link {
  cursor: pointer; user-select: none;
}
.menu-section-link:active { opacity: 0.7; }

.menu-section + .menu-section {
  border-top: 1px solid rgb(255, 255, 255, 0.04);
}

.menu-item {
  background: transparent;
  text-align: left;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--text-bright);
  margin-bottom: 2px;
  min-height: 44px;
  border-radius: 10px;
  transition: background 0.15s, color 0.15s;
  display: flex;
  align-items: center;
}

.menu-item:active {
  background: rgb(56, 227, 172, 0.1);
  color: var(--text-primary);
}

@media (hover: hover) {
  .menu-item:hover:not(:disabled) {
    background: rgb(56, 227, 172, 0.06);
    color: var(--text-primary);
  }
}

.menu-item.danger {
  color: var(--color-error);
}

.menu-item.danger:active {
  background: rgb(255, 107, 107, 0.1);
}

.menu-footer {
  margin-top: auto;
  border-top: 1px solid rgb(255, 255, 255, 0.06);
  padding-top: 14px;
}
.menu-footer a.menu-item {
  text-decoration: none; display: block;
}

/* ===== Modal ===== */
.modal {
  position: fixed;
  inset: 0;
  background: rgb(0, 0, 0, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2500;
}

.modal.hidden {
  display: none !important;
}

.modal-box {
  background: var(--bg-modal);
  padding: 24px;
  border-radius: 16px;
  width: 90%;
  max-width: 380px;
  max-height: 80vh;
  overflow-y: auto;
}

.whatsapp-modal-box {
  text-align: center;
  box-sizing: border-box;
}

.whatsapp-modal-icon {
  margin-bottom: 12px;
}

.whatsapp-join-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  margin-top: 16px;
  margin-bottom: 10px;
  background: #25D366;
  color: white;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s;
}

.whatsapp-join-btn:hover {
  background: #1da851;
}

.limit-example {
  background: rgb(56, 227, 172, 0.06);
  border: 1px solid rgb(56, 227, 172, 0.15);
  border-radius: 10px;
  padding: 14px;
  margin: 12px 0 16px;
}

.limit-example-title {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.limit-example-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.limit-example-step {
  font-size: 14px;
  color: var(--text-bright);
  padding: 6px 10px;
  background: rgb(255, 255, 255, 0.04);
  border-radius: 6px;
}

/* ===== Address list (select modal) ===== */
.addr-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgb(255, 255, 255, 0.04);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.15s;
}

.addr-list-item:hover,
.addr-list-item:active {
  background: rgb(255, 255, 255, 0.12);
}

.addr-list-item.selected {
  border: 2px solid var(--accent);
  background: rgb(56, 227, 172, 0.1);
}

.addr-list-item .addr-radio {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.addr-list-item.selected .addr-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
}

.addr-list-item .addr-text {
  font-family: system-ui, sans-serif;
  font-size: 14px;
  color: var(--text-secondary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.addr-list-item .addr-delete {
  color: var(--color-error);
  background: transparent;
  width: auto;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  font-size: 18px;
  margin: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== QR Result (depósito) ===== */
#resultado {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#qrImage {
  width: 100%;
  max-width: min(240px, 65vw);
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 16px auto 0;
  display: block;
  object-fit: contain;
  border-radius: 14px 14px 0 0;
  border: 2px solid rgb(56, 227, 172, 0.2);
  border-bottom: none;
  box-shadow: 0 0 20px rgb(56, 227, 172, 0.08);
}

/* ===== Textarea ===== */
textarea {
  width: 100%;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 10px;
  border: 1px solid rgb(56, 227, 172, 0.1);
  font-size: 16px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-family: 'DM Sans', system-ui, sans-serif;
  resize: vertical;
}

textarea::placeholder {
  color: var(--text-placeholder);
}

textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ===== FAQ accordion ===== */
.faq-list { text-align: left; }
.faq-item { margin-bottom: 8px; }
.faq-question {
  background: rgb(255, 255, 255, 0.04);
  text-align: left;
  padding: 14px 40px 14px 16px;
  font-size: 15px;
  color: var(--text-primary);
  position: relative;
  min-height: 48px;
}
.faq-question::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.5;
  transition: transform 0.2s ease;
}
.faq-item.open .faq-question::after { transform: translateY(-50%) rotate(180deg); }
.faq-question:active { background: rgb(255, 255, 255, 0.12); }
.faq-answer { padding: 8px 16px 12px; font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.faq-answer p { margin: 0; }
.faq-table { margin-bottom: 12px; }
.faq-table-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgb(255, 255, 255, 0.04);
}
.faq-table-row:last-child { border-bottom: none; }
.faq-table-label {
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.faq-table-value { text-align: right; }

/* ===== Install button ===== */
.install-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 14px;
  background: var(--accent);
  color: var(--bg-primary);
  width: auto;
  max-width: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;
}

.install-btn svg {
  flex-shrink: 0;
}

/* ===== Install modal ===== */
.install-modal h3 {
  text-transform: none;
  font-size: 0.9rem;
  color: var(--text-primary);
  letter-spacing: 0;
  margin: 16px 0 8px;
}

.install-modal h3:first-of-type {
  margin-top: 0;
}

.install-steps {
  text-align: left;
  padding-left: 20px;
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text-bright);
  line-height: 1.7;
}

.install-steps li {
  margin-bottom: 4px;
}

.install-icon-hint {
  color: var(--accent);
}

.install-note {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 4px 0 0;
  line-height: 1.4;
}

.install-instructions {
  background: rgb(56, 227, 172, 0.04);
  border: 1px solid rgb(56, 227, 172, 0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

/* ===== Wallet Guide Modal ===== */
.wallet-guide-modal {
  max-height: 85vh;
  overflow-y: auto;
}

.hint-link {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  display: inline;
  text-decoration: none;
}

.hint-link:hover {
  opacity: 0.8;
}

.guide-steps {
  text-align: left;
}

.guide-step {
  display: flex;
  gap: 14px;
  margin-bottom: 22px;
}

.guide-step-number {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--bg-primary);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.guide-step-content h3 {
  margin: 0 0 4px;
  font-size: 0.95rem;
  color: var(--text-primary);
  text-transform: none;
  letter-spacing: 0;
}

.guide-step-content p {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.guide-mockup {
  margin: 8px 0;
}



.guide-list {
  margin: 0 0 8px;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.guide-list li {
  margin-bottom: 2px;
}

.guide-list code {
  color: var(--accent);
  font-size: 0.8rem;
}

.guide-warning {
  background: rgb(255, 107, 107, 0.08);
  border: 1px solid rgb(255, 107, 107, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: #ff9b9b;
  line-height: 1.5;
  margin-top: 8px;
}

.guide-mockup-trio {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 14px 0;
}

.guide-mockup-trio .guide-mini-mockup:nth-child(3) {
  grid-column: 1 / -1;
  max-width: 60%;
  justify-self: center;
}

.guide-mini-mockup {
  background: #151c24;
  border: 1px solid rgb(255,255,255,0.08);
  border-radius: 16px;
  padding: 12px;
  text-align: center;
}

.guide-mini-screen {
  background: var(--bg-primary);
  border-radius: 10px;
  padding: 14px 10px;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.guide-mini-label {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 8px;
  font-family: monospace;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.guide-screen-subtitle {
  font-size: 9px;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.guide-screen-option {
  width: 90%;
  padding: 8px 10px;
  background: rgb(255,255,255,0.04);
  border: 1px solid rgb(255,255,255,0.06);
  border-radius: 6px;
  text-align: left;
}

.guide-screen-option + .guide-screen-option {
  margin-top: 6px;
}

.guide-screen-option-selected {
  border-color: var(--accent);
  background: rgb(56,227,172,0.08);
}

.guide-screen-option-title {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 2px;
}

.guide-screen-option-desc {
  font-size: 8px;
  color: var(--text-dim);
  line-height: 1.3;
}

.guide-screen-qr {
  width: 70px;
  height: 70px;
  background: white;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.guide-screen-address {
  font-family: monospace;
  font-size: 7px;
  color: var(--accent);
  word-break: break-all;
  line-height: 1.4;
  padding: 6px;
  background: rgb(255,255,255,0.04);
  border-radius: 4px;
  width: 90%;
}

.guide-screen-total {
  font-family: monospace;
  font-size: 12px;
  color: var(--text-bright);
  font-weight: 600;
  margin-bottom: 8px;
}

.guide-screen-asset-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  padding: 6px 8px;
  background: rgb(255,255,255,0.04);
  border-radius: 5px;
}

.guide-screen-asset-row + .guide-screen-asset-row {
  margin-top: 5px;
}

.guide-screen-asset-left {
  display: flex;
  align-items: center;
}

.guide-screen-asset-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 6px;
}

.guide-screen-asset-name {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-bright);
}

.guide-screen-asset-value {
  font-family: monospace;
  font-size: 9px;
  color: var(--text-dim);
}

@media (max-width: 380px) {
  .card {
    padding: 20px;
  }
  .guide-mockup-trio {
    grid-template-columns: 1fr;
  }
  .guide-mockup-trio .guide-mini-mockup:nth-child(3) {
    max-width: 100%;
  }
}

/* ===== Shared FAQ content ===== */
.faq-icon {
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
}

.faq-security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.faq-security-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgb(56, 227, 172, 0.06);
  border: 1px solid rgb(56, 227, 172, 0.12);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-bright);
}

.faq-highlight {
  font-weight: 600;
  color: var(--accent);
  margin-top: 8px;
}

.faq-use-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0;
}

.faq-use-card {
  padding: 14px 16px;
  background: rgb(255, 255, 255, 0.03);
  border: 1px solid rgb(255, 255, 255, 0.06);
  border-radius: 10px;
}

.faq-use-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.faq-use-icon {
  width: 22px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
}

.faq-use-card p {
  margin: 4px 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.faq-use-detail {
  font-size: 0.8rem !important;
  color: var(--text-tertiary) !important;
}

.faq-use-path {
  margin-top: 8px;
  padding: 6px 10px;
  background: rgb(56, 227, 172, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  font-family: monospace;
  font-size: 0.78rem;
  color: var(--accent);
}

/* FAQ "O que é o DePix" features grid */
.faq-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.faq-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: rgb(56, 227, 172, 0.04);
  border: 1px solid rgb(56, 227, 172, 0.1);
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--text-bright);
  line-height: 1.4;
}

.faq-feature-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(56, 227, 172, 0.12);
  border-radius: 8px;
  flex-shrink: 0;
}

.faq-feature-icon svg {
  width: 20px;
  min-width: 20px;
  height: 20px;
  stroke: #4fd1c5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-feature-desc {
  font-size: 0.75rem;
  color: var(--text-tertiary);
}

/* FAQ Ecosystem */
.faq-eco-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.faq-eco-card {
  display: block;
  padding: 14px;
  background: rgb(255, 255, 255, 0.03);
  border: 1px solid rgb(255, 255, 255, 0.06);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}

.faq-eco-card:hover {
  border-color: rgb(56, 227, 172, 0.3);
  background: rgb(56, 227, 172, 0.04);
}

.faq-eco-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.faq-eco-icon {
  width: 28px;
  height: 28px;
  min-width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
}

.faq-eco-p2p {
  background: rgb(56, 227, 172, 0.15);
  color: var(--accent);
}

.faq-eco-enor {
  background: rgb(139, 92, 246, 0.15);
  color: #a78bfa;
}

.faq-eco-kast {
  background: rgb(30, 30, 30, 0.8);
  color: #ffffff;
}

.faq-eco-redot {
  background: rgb(220, 38, 38, 0.15);
  color: #ef4444;
}

.faq-eco-name {
  font-weight: 600;
  font-size: 0.85rem;
}

.faq-eco-p2p-name { color: var(--accent); }
.faq-eco-enor-name { color: #a78bfa; }
.faq-eco-kast-name { color: #e0e0e0; }
.faq-eco-redot-name { color: #ef4444; }

.faq-eco-link-icon {
  width: 14px;
  height: 14px;
  color: var(--text-tertiary);
  margin-left: auto;
  flex-shrink: 0;
}

.faq-eco-card strong {
  font-size: 0.82rem;
  color: var(--text-bright);
}

.faq-eco-card p {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  margin: 4px 0 0;
  line-height: 1.4;
}

.faq-eco-tip {
  padding: 12px 14px;
  background: rgb(255, 193, 7, 0.06);
  border: 1px solid rgb(255, 193, 7, 0.15);
  border-radius: 10px;
  margin: 12px 0;
}

.faq-eco-tip p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.faq-eco-inline-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: -2px;
  stroke: #ffc107;
  margin-right: 2px;
}

.faq-eco-tip strong {
  color: #ffc107;
}

.faq-eco-highlight {
  padding: 14px 16px;
  background: linear-gradient(135deg, rgb(56, 227, 172, 0.08), rgb(56, 227, 172, 0.03));
  border: 1px solid rgb(56, 227, 172, 0.2);
  border-radius: 12px;
  margin: 12px 0;
}

.faq-eco-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--bg-primary);
  padding: 1px 7px;
  border-radius: 20px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  vertical-align: 1px;
  margin-right: 2px;
}

.faq-eco-highlight strong {
  color: var(--text-bright);
}

.faq-eco-highlight p {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.faq-eco-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-top: 8px;
}

@media (max-width: 480px) {
  .faq-security-grid,
  .faq-features-grid,
  .faq-eco-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Toast ===== */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(20, 20, 20, 0.95);
  color: #fff;
  padding: 12px 20px;
  border-radius: 12px;
  font-size: 14px;
  z-index: 3000;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  max-width: 90vw;
  white-space: normal;
  text-align: center;
  line-height: 1.4;
}

.toast.show {
  opacity: 1;
}

.toast.hidden {
  display: none;
}

@supports (-webkit-touch-callout: none) {
  .toast {
    bottom: 32px;
  }
}

/* ===== TRANSACTIONS LIST ===== */

/* Transactions view: fixed layout with scrollable list */

[data-view="transactions"] .card {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}

.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 16px 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}

.transaction-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgb(255,255,255,0.04);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.transaction-item:hover {
  background: rgb(255,255,255,0.1);
}

.transaction-item.highlight {
  background: rgb(56,227,172,0.15);
  border: 1px solid rgb(56,227,172,0.3);
}

.transaction-type {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  min-width: 56px;
  text-align: center;
}

.transaction-type.deposit {
  background: rgb(56,227,172,0.2);
  color: var(--accent);
}

.transaction-type.withdraw {
  background: rgb(159,122,234,0.2);
  color: #b794f4;
}

.transaction-info {
  flex: 1;
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  text-align: center;
}

.transaction-amount {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
  white-space: nowrap;
}

.transaction-date {
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
}

.transaction-status {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
  text-align: center;
}

.transaction-status.status-green {
  background: rgb(104,211,145,0.2);
  color: var(--color-success);
}

.transaction-status.status-yellow {
  background: rgb(236,201,75,0.2);
  color: #ecc94b;
}

.transaction-status.status-orange {
  background: rgb(237,137,54,0.2);
  color: #ed8936;
}

.transaction-status.status-red {
  background: rgb(255,107,107,0.2);
  color: var(--color-error);
}

.transaction-status.status-blue {
  background: rgb(99,179,237,0.2);
  color: #63b3ed;
}

.transaction-status.status-gray {
  background: rgb(160,174,192,0.2);
  color: #a0aec0;
}

/* Transaction item — layout with details */
.transaction-item {
  flex-wrap: wrap !important;
}

.transaction-details {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid rgb(255, 255, 255, 0.06);
}

.transaction-detail {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  min-width: 0;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}

.transaction-detail.copyable {
  cursor: pointer;
}

.transaction-detail.copyable:hover {
  background: rgb(56, 227, 172, 0.08);
}

.transaction-detail.copyable:active {
  background: rgb(56, 227, 172, 0.15);
}

.transaction-detail.copyable.copied .transaction-detail-value {
  color: var(--accent);
}

.transaction-detail-label {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.transaction-detail-value {
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s;
}


.transaction-detail.mono .transaction-detail-value {
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 12px;
}

.transaction-detail.copyable:hover .transaction-detail-value {
  color: var(--text-bright);
}

.copy-icon {
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: color 0.15s;
}

.transaction-detail.copyable:hover .copy-icon {
  color: var(--accent);
}

.transaction-detail.copyable.copied .copy-icon {
  color: var(--accent);
}

.transaction-detail a {
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}

.transaction-detail a:hover {
  color: var(--accent);
}

.transaction-detail a .external-icon {
  flex-shrink: 0;
}

/* ===== Extrato ===== */

.extrato-filters {
  margin-bottom: 16px;
}

/* Search + filter toolbar */
.extrato-toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.extrato-search-row {
  position: relative;
  flex: 1;
  min-width: 0;
}

.extrato-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.extrato-search-row input[type="text"] {
  width: 100%;
  padding: 10px 30px 10px 34px !important;
  margin-bottom: 0 !important;
  font-size: 13px;
  height: 40px !important;
  box-sizing: border-box;
  background: var(--bg-input) !important;
  border: 1px solid rgb(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: var(--text-bright) !important;
}

.extrato-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 4px;
  width: auto;
  margin: 0;
}
.extrato-search-clear:hover { color: var(--text-bright); }

.extrato-search-row input[type="text"]::placeholder {
  color: var(--text-placeholder);
  opacity: 1;
}

.extrato-search-row input[type="text"]:focus {
  border-color: rgb(56, 227, 172, 0.4) !important;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.extrato-search-hint {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--text-tertiary);
  background: var(--bg-input);
  border: 1px solid rgb(255, 255, 255, 0.08);
  border-radius: 6px;
  z-index: 1;
}

.extrato-search-row input[type="text"]:focus ~ .extrato-search-hint {
  display: block;
}

.extrato-type-toggle {
  display: flex !important;
  flex-direction: row !important;
  background: rgb(255, 255, 255, 0.06);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 0;
  gap: 0;
}

.extrato-pill {
  flex: 1 !important;
  width: auto !important;
  padding: 8px 4px !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.extrato-pill.active {
  background: rgb(56, 227, 172, 0.15) !important;
  color: var(--accent);
}

/* Filter toggle button */
.extrato-filter-toggle {
  display: flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  flex-shrink: 0;
  background: transparent !important;
  border: 1px solid rgb(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.extrato-filter-toggle:hover {
  color: var(--text-bright);
  border-color: rgb(255, 255, 255, 0.2) !important;
}

.extrato-filter-toggle.active {
  color: var(--accent);
  border-color: rgb(56, 227, 172, 0.3) !important;
}

.extrato-filter-chevron {
  margin-left: auto;
  transition: transform 0.2s;
}

.extrato-filter-toggle.open .extrato-filter-chevron {
  transform: rotate(180deg);
}

.extrato-filter-badge {
  background: var(--accent);
  color: var(--bg-primary);
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 5px;
}

/* Extrato download button */
.extrato-report-btn {
  display: flex !important;
  align-items: center;
  gap: 6px;
  width: auto !important;
  height: 40px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  flex-shrink: 0;
  background: transparent !important;
  border: 1px solid rgb(56, 227, 172, 0.3) !important;
  border-radius: 8px !important;
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.extrato-report-btn:hover {
  background: rgb(56, 227, 172, 0.08) !important;
  border-color: rgb(56, 227, 172, 0.5) !important;
}

.extrato-report-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Icon-only variant: square button, no text label, accessible name comes
 * from aria-label. Used in the toolbar after dropping the "Baixar" word
 * — pairs visually with the icons in the search/filter chips around it
 * and makes the toolbar fit comfortably in the 420px card without the
 * popover-wrap squeezing the filter button. */
.extrato-report-btn-icon {
  width: 40px !important;
  padding: 0 !important;
  justify-content: center;
  gap: 0;
}

/* Report download popover */
.report-popover-wrap {
  position: relative;
}

/* Payment info banners */
.payment-info-banners {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.payment-info-banner {
  padding: 8px 12px;
  background: rgb(255, 255, 255, 0.03);
  border-left: 3px solid rgb(56, 227, 172, 0.3);
  border-radius: 0 6px 6px 0;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.4;
}

.payment-info-banner strong {
  color: var(--text-secondary);
}

/* Commissions view: scrollable layout matching transactions */

[data-view="commissions"] .card {
  display: flex;
  flex-direction: column;
}

/* The Minhas Comissões title is centered (matches every other view title
 * in the app — view-title is text-align:center on .card). The download
 * button moved out of the header into the "Comissões Recebidas" section
 * row, so we keep this class only as a no-op for backwards compatibility
 * if any handler still queries `.commissions-header`. */
.commissions-title {
  text-align: center;
}

/* Section title row that holds the section's `<h2>` on the left and an
 * inline action button on the right. Used by Comissões Recebidas to
 * place the download button next to the heading without disrupting the
 * affiliate-section-title's existing flex behaviour (which is itself
 * flex for icon + label spacing). */
.affiliate-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.affiliate-section-title-row .affiliate-section-title {
  margin-bottom: 0;
}
.affiliate-section-title-row .report-popover-wrap {
  flex-shrink: 0;
}

.commissions-list {
  max-height: 30vh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
}

.report-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 100;
  width: 220px;
  padding: 10px;
  background: #0f1920;
  border: 1px solid rgb(56, 227, 172, 0.15);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgb(0, 0, 0, 0.5);
}

.report-popover-dates {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}

.report-popover-field {
  flex: 1;
  min-width: 0;
}

.report-popover-field label {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}

.report-popover-field input[type="date"] {
  width: 100%;
  padding: 5px 4px !important;
  font-size: 12px !important;
  margin: 0 !important;
  min-width: 0;
}

.report-popover-submit {
  width: 100%;
  padding: 7px !important;
  font-size: 12px;
  font-weight: 500;
  background: rgb(56, 227, 172, 0.1) !important;
  border: 1px solid rgb(56, 227, 172, 0.25) !important;
  border-radius: 6px !important;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.15s;
}

.report-popover-submit:hover {
  background: rgb(56, 227, 172, 0.18) !important;
}

.report-popover-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.report-popover .mensagem {
  margin-top: 6px;
  font-size: 12px;
}

/* Collapsible filter panel */
.extrato-filter-panel {
  margin-top: 10px;
  padding: 14px;
  background: rgb(255, 255, 255, 0.03);
  border: 1px solid rgb(255, 255, 255, 0.06);
  border-radius: 10px;
  animation: extrato-panel-in 0.15s ease-out;
}

@keyframes extrato-panel-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.extrato-filter-group {
  margin-bottom: 12px;
}

.extrato-filter-group:last-of-type {
  margin-bottom: 0;
}

.extrato-filter-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.extrato-filter-panel select,
.modal-box select {
  width: 100%;
  padding: 9px 32px 9px 12px !important;
  margin-bottom: 0 !important;
  font-size: 13px;
  height: 38px !important;
  box-sizing: border-box;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: var(--bg-input) !important;
  border: 1px solid rgb(255, 255, 255, 0.1) !important;
  border-radius: 8px !important;
  color: var(--text-bright) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238294a7' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-color: var(--bg-input) !important;
}

.extrato-date-row {
  display: flex;
  gap: 8px;
}

.extrato-date-field {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid rgb(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.extrato-date-prefix {
  padding: 0 0 0 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.extrato-date-field input[type="date"] {
  flex: 1;
  padding: 9px 10px 9px 6px !important;
  margin-bottom: 0 !important;
  font-size: 13px;
  min-width: 0;
  height: 38px !important;
  box-sizing: border-box;
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-bright) !important;
  color-scheme: dark;
}

/* Period preset buttons */
.extrato-period-presets {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 0;
}

.extrato-period-btn {
  flex: 0 0 auto !important;
  width: auto !important;
  padding: 6px 12px !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
  border: 1px solid rgb(255, 255, 255, 0.1) !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.extrato-period-btn:hover {
  color: var(--text-bright);
  border-color: rgb(255, 255, 255, 0.2) !important;
}

.extrato-period-btn.active {
  background: rgb(56, 227, 172, 0.15) !important;
  color: var(--accent);
  border-color: rgb(56, 227, 172, 0.3) !important;
}

.extrato-date-row {
  margin-top: 8px;
}

/* Clear filters button */
.extrato-clear-filters {
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 0 !important;
  padding: 8px !important;
  background: transparent !important;
  border: 1px solid rgb(255, 107, 107, 0.25) !important;
  border-radius: 8px !important;
  color: var(--color-error) !important;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.extrato-clear-filters:hover {
  background: rgb(255, 107, 107, 0.08) !important;
  border-color: rgb(255, 107, 107, 0.4) !important;
}

.extrato-count {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-bottom: 8px;
  text-align: center;
}

#transactions-load-more {
  text-align: center;
  margin-top: 12px;
}

#transactions-load-more button {
  width: auto;
  padding: 10px 32px;
}

/* ===== Affiliates ===== */

.affiliate-link-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.affiliate-link-row input {
  flex: 1;
  font-size: 0.85rem;
  min-width: 0;
  margin-bottom: 0;
}

.affiliate-link-row button {
  width: auto;
  flex-shrink: 0;
  margin-bottom: 0;
}

.affiliate-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 20px 0;
}

.affiliate-stat {
  position: relative;
  background: rgb(56, 227, 172, 0.06);
  border: 1px solid rgb(56, 227, 172, 0.12);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}

.affiliate-stat-wide {
  grid-column: 1 / -1;
}

.affiliate-stat .icon-btn-sm {
  position: absolute;
  top: 6px;
  right: 6px;
}

.affiliate-stat-label {
  font-size: 0.75rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  text-align: center;
}

.affiliate-stat-value {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--accent);
  display: block;
  margin-top: 4px;
}

.icon-btn-sm {
  background: rgb(56, 227, 172, 0.15);
  border: none;
  color: var(--accent);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.affiliate-section {
  margin-top: 28px;
}

.affiliate-section-title {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.affiliates-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.referral-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: rgb(255, 255, 255, 0.04);
}

.referral-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.referral-date {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  margin-left: auto;
}

.payment-item {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

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

.payment-addr {
  flex: 1;
  min-width: 0;
  font-size: 0.75rem;
  color: var(--text-tertiary);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tx-link {
  font-size: 0.75rem;
  color: #4fd1c5;
  text-decoration: none;
}

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

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.modal-actions button {
  flex: 1;
}

/* ===== Landing Page ===== */
/* Visual identity: Space Grotesk (display), DM Sans (body), JetBrains Mono (mono) */
/* Palette: #0a0f14 deep bg, #111921 card, #38e3ac accent, #8a9bb0 secondary text */

.landing-page {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 0;
  background: var(--bg-primary);
  overflow-x: clip;
  color: var(--text-primary);
  font-family: 'DM Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.landing-page:not(.hidden) {
  animation: fadeIn 0.3s ease-out;
}

/* Nav */
.landing-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgb(10, 15, 20, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgb(56, 227, 172, 0.12);
  padding: 0 20px;
}

.landing-nav-inner {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
}

.landing-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.03em;
}

.landing-logo-icon {
  flex-shrink: 0;
}

.landing-nav-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.landing-nav a.landing-nav-link,
.landing-nav a.landing-nav-link:visited {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgb(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.15s;
}

.landing-nav a.landing-nav-link:hover {
  color: #fff;
}

.landing-nav-cta {
  display: inline-flex;
  align-items: center;
  width: auto;
  padding: 8px 22px;
  margin: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--bg-primary);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: opacity 0.15s;
}

.landing-nav-cta:active {
  opacity: 0.85;
}

/* Hero */
.landing-hero {
  text-align: center;
  padding: 128px 20px 56px;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.landing-hero-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 18px;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.landing-hero-title em {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}

.landing-hero-subtitle {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 36px;
}

/* Toggle */
.landing-toggle {
  display: flex;
  width: fit-content;
  background: var(--bg-card);
  border: 1px solid rgb(56, 227, 172, 0.15);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 36px;
  gap: 0;
}

.landing-toggle-option {
  width: auto;
  padding: 9px 16px;
  margin: 0;
  border-radius: 7px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-tertiary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'DM Sans', system-ui, sans-serif;
  white-space: nowrap;
}

.landing-toggle-option.active {
  background: rgb(56, 227, 172, 0.15);
  color: var(--accent);
  font-weight: 600;
}

/* CTA Button */
.landing-cta-btn {
  display: inline-block;
  width: auto;
  padding: 14px 40px;
  margin: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--bg-primary);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  transition: opacity 0.15s, transform 0.15s;
}

.landing-cta-btn:active {
  opacity: 0.85;
  transform: scale(0.98);
}

/* Content sections */
.landing-content {
  padding: 0 20px;
}

.landing-section {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 20px;
  border-top: 1px solid rgb(56, 227, 172, 0.06);
}

.landing-section h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 32px;
  text-align: center;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* Section label style (like the original) */
.landing-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
  text-align: center;
}

/* Steps */
.landing-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.landing-step {
  background: var(--bg-card);
  border: 1px solid rgb(56, 227, 172, 0.1);
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  position: relative;
}

.landing-step-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: var(--bg-primary);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.landing-step h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--text-primary);
}

.landing-step p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Benefits */
.landing-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.landing-benefit {
  background: var(--bg-card);
  border: 1px solid rgb(56, 227, 172, 0.08);
  border-radius: 14px;
  padding: 22px 18px;
}

.landing-benefit-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgb(56, 227, 172, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.landing-benefit-icon svg {
  width: 18px;
  height: 18px;
  stroke: var(--accent);
}

.landing-benefit h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text-primary);
}

.landing-benefit p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* Info grid (taxas) */
.landing-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid rgb(56, 227, 172, 0.1);
  border-radius: 14px;
  padding: 22px;
}

.landing-info-item {
  text-align: center;
}

.landing-info-label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  margin-bottom: 4px;
}

.landing-info-value {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.landing-info-value em {
  font-style: normal;
  color: var(--accent);
  font-weight: 700;
}

/* Ecosystem cards */
.landing-ecosystem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.landing-eco-card {
  background: var(--bg-card);
  border: 1px solid rgb(56, 227, 172, 0.08);
  border-radius: 14px;
  padding: 22px 18px;
}

.landing-eco-card h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 8px;
}

.landing-eco-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

/* FAQ */
.landing-faq {
  max-width: 700px;
  margin: 0 auto;
}

.landing-faq-item {
  background: var(--bg-card);
  border: 1px solid rgb(56, 227, 172, 0.08);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}

.landing-faq-item summary {
  padding: 16px 20px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.landing-faq-item summary::-webkit-details-marker {
  display: none;
}

.landing-faq-item summary::after {
  content: '+';
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.2rem;
  color: var(--accent);
  flex-shrink: 0;
  margin-left: 16px;
  transition: transform 0.2s;
}

.landing-faq-item[open] summary::after {
  content: '−';
}

.landing-faq-item[open] summary {
  border-bottom: 1px solid rgb(56, 227, 172, 0.08);
}

.landing-faq-item div {
  padding: 14px 20px 18px;
}

.landing-faq-item p {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* Final CTA */
.landing-affiliates-section {
  text-align: center;
}

.landing-affiliates-subtitle {
  color: var(--text-secondary);
  font-size: 15px;
  margin-bottom: 32px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.landing-affiliates-section .landing-benefits {
  text-align: left;
  margin-bottom: 32px;
}

.landing-affiliates-section .landing-cta-btn {
  display: inline-block;
}

/* What is DePix section */
.landing-what-section {
  text-align: center;
}

.landing-what-lead {
  font-size: 1.25rem;
  color: var(--text-primary);
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto 12px;
}

.landing-what-lead strong {
  color: var(--accent);
}

.landing-what-sub {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 32px;
}

.landing-what-sub strong {
  color: var(--text-primary);
}

.landing-what-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 700px;
  margin: 0 auto;
}

.landing-what-card {
  background: rgb(56, 227, 172, 0.04);
  border: 1px solid rgb(56, 227, 172, 0.1);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: left;
}

.landing-what-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgb(56, 227, 172, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.landing-what-card-icon svg {
  width: 20px;
  height: 20px;
  stroke: var(--accent);
}

.landing-what-card h3 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
}

.landing-what-card p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 600px) {
  .landing-what-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Inclusion section */
.landing-inclusion-section {
  text-align: center;
}

.landing-inclusion-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  background: rgb(56, 227, 172, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.landing-inclusion-icon svg {
  width: 26px;
  height: 26px;
}

.landing-inclusion-text {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 600px;
  margin: 0 auto 28px;
}



/* Blog section */
.landing-blog-section {
  text-align: center;
}

.landing-blog-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 18px;
  background: rgb(56, 227, 172, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.landing-blog-icon svg {
  width: 26px;
  height: 26px;
}

.landing-blog-section p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0 0 28px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.landing-final-cta {
  text-align: center;
  padding: 72px 20px;
  max-width: none;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: linear-gradient(135deg, rgb(56, 227, 172, 0.06), rgb(56, 227, 172, 0.02));
  border-top: 1px solid rgb(56, 227, 172, 0.12);
  border-bottom: 1px solid rgb(56, 227, 172, 0.12);
}

.landing-final-cta h2 {
  margin-bottom: 10px;
}

.landing-final-cta p {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0 0 32px;
}

/* Footer */
.landing-footer {
  text-align: center;
  padding: 48px 20px;
  max-width: 960px;
  margin: 0 auto;
}

.landing-footer p {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin: 0 0 4px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}

.landing-footer-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.landing-footer-link:hover {
  text-decoration: underline;
}

.landing-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.landing-footer-sep {
  color: #2a3a4d;
}

.landing-section-link-inline {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}
.landing-section-link-inline:hover {
  text-decoration: underline;
}

.landing-section-link {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.95rem;
}
.landing-section-link a {
  color: var(--accent);
  text-decoration: none;
}
.landing-section-link a:hover {
  text-decoration: underline;
}

.eco-card-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.85rem;
}
.eco-card-link:hover {
  text-decoration: underline;
}

/* PWA: hide landing page in standalone mode */
@media (display-mode: standalone) {
  section[data-view="landing"] {
    display: none !important;
  }
}

/* Landing responsive - small screens */
@media (max-width: 374px) {
  .landing-hero-title {
    font-size: 2.1rem;
  }

  .landing-hero-subtitle {
    font-size: 0.92rem;
  }

  .landing-toggle-option {
    padding: 8px 12px;
    font-size: 0.78rem;
  }
}

/* Landing responsive */
@media (min-width: 768px) {
  .landing-hero {
    padding: 96px 20px 72px;
  }

  .landing-hero-title {
    font-size: 3.4rem;
  }

  .landing-hero-subtitle {
    font-size: 1.15rem;
  }

  .landing-section {
    padding: 80px 20px;
  }

  .landing-section h2 {
    font-size: 1.8rem;
    margin-bottom: 40px;
  }

  .landing-final-cta {
    padding: 88px 20px;
  }

  .landing-footer {
    padding: 56px 20px;
  }
}

@media (hover: hover) {
  .landing-nav-cta:hover {
    opacity: 0.9;
    filter: brightness(1.05);
  }

  .landing-cta-btn:hover {
    opacity: 0.9;
    filter: brightness(1.05);
  }

  .landing-toggle-option:hover:not(.active) {
    color: var(--text-bright);
  }
}

/* ===== MERCHANT DASHBOARD ===== */

/* All merchant views: force left-align (cards default to center) */
[data-view="merchant"] .card,
[data-view="merchant-charge"] .card,
[data-view="merchant-sales"] .card,
[data-view="merchant-account"] .card,
[data-view="merchant-api"] .card,
[data-view="webhook-logs"] .card { text-align: left; }

/* Keep these centered */
[data-view^="merchant"] .link-text,
[data-view="webhook-logs"] .link-text { text-align: center; }

/* Merchant & detail pages: left-align content within centered card */

/* Pages with scrollable lists: flex column + max-height so list scrolls when full */
[data-view="merchant-sales"] .card,
[data-view="webhook-logs"] .card {
  display: flex; flex-direction: column;
  max-height: calc(100dvh - 48px); overflow: hidden;
}

/* Home screen WhatsApp banner — sits inline in the header-bar next to the
   menu (☰) button. flex:1 so it fills the row; min-width:0 + truncation on
   the inner text so a longer copy doesn't blow the 420px card. */
.home-whatsapp-banner {
  flex: 1; min-width: 0;
  background: rgb(37, 211, 102, 0.08); border: 1px solid rgb(37, 211, 102, 0.12);
  border-radius: 8px; padding: 8px 12px;
  display: flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--text-bright); font-size: 13px;
}
.home-whatsapp-text {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-whatsapp-arrow { color: #25D366; flex-shrink: 0; }

/* Home screen verify banner */
.home-verify-banner {
  background: rgb(56, 227, 172, 0.06); border: 1px solid rgb(56, 227, 172, 0.12);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px; text-align: left;
}
.home-verify-banner-text { flex: 1; font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.home-verify-banner-text strong { color: var(--text-primary); font-size: 13px; display: block; margin-bottom: 2px; }
.home-verify-banner-text p { margin: 0; }
.home-verify-banner-text em { color: var(--accent); font-style: normal; font-weight: 600; }
.home-verify-banner-link {
  color: var(--accent); font-size: 12px; white-space: nowrap; text-decoration: none; flex-shrink: 0;
}

/* "Avançado" hint inside the Carteira Externa intro modal CTA. */
.empty-state-advanced {
  font-size: 11px; color: var(--text-tertiary); font-weight: 400;
  margin-left: 4px;
}

/* Form-attached destination block on deposit / withdraw screens.
   Two stacked elements (left-aligned to read like a form field group):
   a small grey label ("Depositando DePix em" / "Sacando DePix de") and
   below it a green chip with the active wallet identity or external
   address. Tight bottom margin (4px) so the block hugs the next form
   label instead of floating between header and form. */
.form-addr-block {
  margin: 14px 0 4px;
}
.form-addr-prefix {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: left;
  line-height: 1.4;
}
.addr-chip.addr-chip-form {
  display: block;
  width: 100%; box-sizing: border-box;
  margin: 0;
  padding: 8px 12px;
  text-align: left;
  white-space: normal;
  line-height: 1.45;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.addr-chip .addr-chip-label {
  display: inline;
  font-weight: 500;
}
.addr-chip .icon-btn-sm {
  vertical-align: middle;
  margin-left: 4px;
}

/* Minha Carteira — maintenance replacement (kill-switch ON + wallet exists) */
.wallet-home-maintenance-view {
  text-align: center;
  padding: 8px 4px 0;
}
.wallet-home-maintenance-icon {
  color: #ed8936;
  display: flex; justify-content: center; align-items: center;
  margin-bottom: 12px;
}
.wallet-home-maintenance-title {
  margin: 0 0 10px; font-size: 16px; color: var(--text-primary);
}
.wallet-home-maintenance-copy {
  margin: 0 0 10px; font-size: 13px; color: var(--text-secondary);
  line-height: 1.55;
}
.wallet-home-maintenance-copy:last-of-type { margin-bottom: 18px; }
.wallet-home-maintenance-view button { width: 100%; margin-bottom: 0; }

/* Carteira Externa + Carteira Integrada modals — educational blocks */
.wallet-info-block {
  background: rgb(79, 209, 197, 0.06);
  border: 1px solid rgb(79, 209, 197, 0.18);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
  text-align: left;
}
.wallet-info-block .info-text { margin: 0 0 8px; }
.wallet-info-block .info-text:last-child { margin-bottom: 0; }
.wallet-info-heading {
  margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.wallet-info-list {
  margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: 13px; line-height: 1.5;
}
.wallet-info-list li { margin-bottom: 4px; }
.wallet-info-list li:last-child { margin-bottom: 0; }

.wallet-section {
  margin: 14px 0;
  text-align: left;
}
.wallet-section-title {
  margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--text-primary);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.wallet-section > .info-text { margin: 0 0 10px; }
.wallet-section code {
  background: rgb(255, 255, 255, 0.08);
  padding: 1px 5px; border-radius: 4px; font-size: 12px;
}

.external-wallet-help { margin: -4px 0 10px; font-size: 13px; }
.external-wallet-help .link-button {
  background: none; border: none; padding: 0; margin: 0;
  width: auto; color: var(--accent); font-size: 13px;
  text-decoration: underline; cursor: pointer;
}

#integrated-wallet-ctas { margin: 16px 0 0; }
#integrated-wallet-ctas button + button { margin-top: 8px; }
#integrated-wallet-ctas button[disabled] { opacity: 0.5; cursor: not-allowed; }

/* Home destination selector — wallet vs external address picker. */
.home-destination {
  margin-bottom: 14px;
  text-align: left;
}
.home-destination-label {
  margin: 0 0 6px; font-size: 12px; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.home-destination-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: rgb(79, 209, 197, 0.08);
  border: 1px solid rgb(79, 209, 197, 0.28);
  border-radius: 10px;
}
.home-destination-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); color: #0b2a2b; flex-shrink: 0;
}
.home-destination-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.home-destination-title {
  font-size: 14px; color: var(--text-primary); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.home-destination-sub {
  font-size: 12px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Secondary link — must override the global input,button { width:100%; margin-bottom:12px; padding:14px } */
.home-destination-link {
  background: none; border: none; cursor: pointer;
  color: var(--accent); font-size: 12px; font-weight: 500;
  text-decoration: underline; text-align: left;
  padding: 6px 0 0; width: auto; margin: 0;
}
.home-destination-link:hover { color: #7de4d9; }

/* Header chip — wallet-flavored variant when the destination is the in-app wallet */
.addr-chip.addr-chip-wallet {
  background: rgb(79, 209, 197, 0.14);
  border-color: rgb(79, 209, 197, 0.38);
  color: var(--accent);
}

/* Verify account page */
[data-view="verify-account"] .card { text-align: left; }
[data-view="verify-account"] .link-text { text-align: center; }

.verify-account-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.verify-account-title { font-size: 1rem; margin: 0; }
.verify-account-subtitle { font-size: 12px; color: var(--text-tertiary); margin: 2px 0 0; }
.verify-account-intro { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 18px; }

.verify-steps {
  display: flex; flex-direction: column; gap: 0;
  background: rgb(255,255,255,0.03); border-radius: 10px;
  overflow: hidden; margin-bottom: 18px;
}
.verify-step {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border-bottom: 1px solid rgb(255,255,255,0.04);
}
.verify-step:last-child { border-bottom: none; }
.verify-step-highlight { background: rgb(56, 227, 172, 0.05); }
.verify-step-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
}
.verify-dot-green { background: var(--color-success); }
.verify-dot-yellow { background: #ecc94b; }
.verify-step-content { flex: 1; min-width: 0; }
.verify-step-content strong { display: block; font-size: 13px; color: var(--text-primary); }
.verify-step-desc { font-size: 12px; color: var(--text-tertiary); }
.verify-step-badges {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0;
}
.verify-step-badge {
  font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 4px;
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.3px;
}
.verify-badge-yellow { background: rgb(236, 201, 75, 0.12); color: #ecc94b; }
.verify-badge-green { background: rgb(104, 211, 145, 0.12); color: var(--color-success); }
.verify-badge-limit {
  font-size: 12px;
  color: var(--text-secondary);
  background: rgb(138, 155, 181, 0.1);
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}
.verify-badge-limit-green {
  color: var(--accent);
  background: rgb(56, 227, 172, 0.08);
}

.verify-bonus {
  background: rgb(255,255,255,0.03); border-radius: 10px;
  padding: 12px; margin-bottom: 18px;
}
.verify-bonus strong { font-size: 12px; color: var(--text-secondary); display: block; margin-bottom: 8px; }
.verify-bonus-items { display: flex; flex-direction: column; gap: 6px; }
.verify-bonus-item {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--text-bright); line-height: 1.4;
}
.verify-bonus-item svg { flex-shrink: 0; margin-top: 1px; }

.verify-progress-section { margin-bottom: 14px; }

/* Verification progress (unverified state) */
.merchant-verify-card {
  text-align: center; padding: 8px 0;
}
.merchant-verify-icon { margin-bottom: 12px; }
.merchant-verify-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.2rem; color: var(--text-primary); margin: 0 0 10px;
}
.merchant-verify-desc {
  font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 20px;
}
.progress-bar-container {
  width: 100%; height: 8px; background: rgb(56, 227, 172, 0.1);
  border-radius: 4px; margin: 0 0 8px; overflow: hidden;
}
.progress-bar { height: 100%; background: var(--accent); border-radius: 4px; transition: width 0.5s ease; }
.progress-text { color: var(--text-secondary); font-size: 13px; margin: 0 0 20px; text-align: center; }
.merchant-verify-cta {
  display: inline-block; background: var(--accent); color: var(--bg-primary);
  font-weight: 600; font-size: 0.9rem; padding: 12px 28px;
  border-radius: 10px; text-decoration: none;
}

/* Dismissable info banner */
.merchant-banner {
  background: rgb(56, 227, 172, 0.06); border: 1px solid rgb(56, 227, 172, 0.1);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
  display: flex; gap: 10px; align-items: flex-start;
}
.merchant-banner-content { flex: 1; font-size: 13px; line-height: 1.5; color: var(--text-secondary); }
.merchant-banner-content strong { color: var(--text-bright); }
.merchant-banner-content p { margin: 4px 0 0; }
.merchant-banner-close {
  background: none; border: none; color: var(--text-tertiary);
  font-size: 14px; cursor: pointer; padding: 2px; line-height: 1; flex-shrink: 0;
  width: auto; margin-bottom: 0;
}
.merchant-banner-danger { border-color: rgb(255, 107, 107, 0.2); background: rgb(255, 107, 107, 0.06); }
.merchant-banner-danger p { color: var(--text-primary); margin: 0; }
.merchant-banner-warning { border-color: rgb(252, 211, 77, 0.32); background: rgb(252, 211, 77, 0.08); }
.merchant-banner-warning p { color: var(--text-primary); margin: 0; }
.merchant-banner-warning a {
  color: var(--accent); text-decoration: underline; font-weight: 600;
}

/* CTA button (create checkout) — same style as app primary button */
.merchant-cta {
  width: 100%; padding: 14px; font-size: 0.9rem; font-weight: 600;
  background: var(--accent); color: var(--bg-primary); border: none;
  border-radius: 10px; cursor: pointer; margin-top: 8px;
}
.merchant-cta:disabled { opacity: 0.6; cursor: not-allowed; }

/* ===== CHARGE VIEW — My Payment Link ===== */
.charge-card { text-align: center; }
.charge-intro {
  font-size: 14px; color: var(--text-secondary); line-height: 1.6;
  margin: 0 0 20px; text-align: center;
}
.charge-qr-wrapper {
  display: flex; justify-content: center; align-items: center;
  min-height: 200px; margin-bottom: 16px;
}
.charge-qr-img {
  width: 200px; height: 200px; border-radius: 12px;
  image-rendering: pixelated;
}
.charge-qr-loading { color: var(--text-tertiary); font-size: 13px; }
.charge-qr-error { color: var(--color-error); font-size: 13px; }
.charge-qr-hint { color: var(--text-secondary); font-size: 12px; text-align: center; margin: 6px 0 16px; line-height: 1.4; }
.charge-link-box { margin-bottom: 16px; }
.charge-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; text-align: center; padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  color: #4fd1c5; text-decoration: none;
  background: rgb(79, 209, 197, 0.06);
  border: 1px solid rgb(79, 209, 197, 0.18);
  border-radius: 8px;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
  overflow: hidden;
}
.charge-link > span {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.charge-link:hover { background: rgb(79, 209, 197, 0.12); border-color: rgb(79, 209, 197, 0.3); }
.charge-link-icon { flex-shrink: 0; opacity: 0.6; }
.charge-cta-primary {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px; border-radius: 12px; font-size: 15px; font-weight: 600;
  cursor: pointer; border: none;
  background: var(--accent); color: var(--bg-primary);
  margin-bottom: 12px;
}
.charge-cta-primary:active { background: var(--accent-hover); }
.charge-cta-download {
  padding: 16px 20px; font-size: 16px; gap: 10px; margin-bottom: 14px;
}
.charge-actions-secondary {
  display: flex; gap: 10px; margin-bottom: 14px;
}
.charge-action-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 8px; border-radius: 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid rgb(56, 227, 172, 0.18);
  background: transparent; color: var(--text-bright);
  white-space: nowrap;
}
.charge-action-btn:active { background: rgb(56, 227, 172, 0.10); }
.charge-download-hint { text-align: left; line-height: 1.5; margin-bottom: 24px; }
.charge-help {
  background: rgb(56, 227, 172, 0.04); border: 1px solid rgb(56, 227, 172, 0.08);
  border-radius: 12px; padding: 16px; text-align: left;
}
.charge-help-title {
  font-size: 14px; font-weight: 600; color: var(--text-bright); margin: 0 0 12px;
}
.charge-help-steps { display: flex; flex-direction: column; gap: 10px; }
.charge-help-step {
  display: flex; align-items: flex-start; gap: 10px;
}
.charge-help-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: rgb(56, 227, 172, 0.15); color: var(--accent);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.charge-help-step p {
  margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5;
}
.charge-help-step .link { color: var(--accent); }

/* ===== Custom dropdown (address picker) ===== */
.custom-dropdown { position: relative; margin-bottom: 8px; }
.custom-dropdown-toggle {
  width: 100%; padding: 12px 14px; border-radius: 10px;
  background: #1a2332; border: 1px solid rgb(56, 227, 172, 0.15);
  color: var(--text-bright); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0; font-weight: 400; text-align: left;
}
.custom-dropdown-toggle:active { background: #1e2a3a; }
.custom-dropdown-chevron { flex-shrink: 0; transition: transform 0.2s; color: var(--text-tertiary); }
.custom-dropdown.open .custom-dropdown-chevron { transform: rotate(180deg); }
.custom-dropdown-options {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  background: #1a2332; border: 1px solid rgb(56, 227, 172, 0.15);
  border-radius: 10px; max-height: 180px; overflow-y: auto;
  box-shadow: 0 8px 24px rgb(0, 0, 0, 0.4);
}
.custom-dropdown-option {
  padding: 12px 14px; cursor: pointer; font-size: 13px;
  color: var(--text-secondary); font-family: monospace; word-break: break-all;
  border-bottom: 1px solid rgb(255, 255, 255, 0.04);
  transition: background 0.15s;
}
.custom-dropdown-option:last-child { border-bottom: none; }
.custom-dropdown-option:active,
.custom-dropdown-option.selected { background: rgb(56, 227, 172, 0.1); color: var(--text-primary); }
@media (hover: hover) {
  .custom-dropdown-toggle:hover { background: #1e2a3a; }
  .custom-dropdown-option:hover { background: rgb(56, 227, 172, 0.06); color: var(--text-bright); }
}

/* ===== Minha Conta — data fields ===== */
/* Account fields */
.account-list {
  background: rgb(255,255,255,0.03); border-radius: 10px; overflow: hidden;
}
.account-field {
  padding: 12px 14px;
  border-bottom: 1px solid rgb(255,255,255,0.04);
}
.account-field:last-child { border-bottom: none; }
.account-field-label { color: var(--text-tertiary); font-size: 12px; margin-bottom: 3px; }
.account-field-value-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.account-field-value {
  flex: 1; min-width: 0;
  color: var(--text-primary); font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.account-field-value.empty { color: var(--text-dim); font-size: 14px; }
.account-field-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.merchant-edit-btn {
  flex-shrink: 0;
  width: auto; margin-bottom: 0;
  background: none; border: none; color: var(--accent);
  font-size: 12px; padding: 0 0 0 10px; cursor: pointer; opacity: 0.8;
  white-space: nowrap;
}
.merchant-edit-btn:hover { opacity: 1; }
.account-advanced-toggle-row { padding: 14px 0 2px; margin-top: 4px; border-top: 1px solid rgb(255,255,255,0.06); }
.account-advanced-toggle-row .advanced-toggle-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid rgb(56, 227, 172, 0.12);
  background: rgb(56, 227, 172, 0.04); color: var(--text-secondary);
  margin-bottom: 0;
}
.account-advanced-toggle-row .advanced-toggle-btn:active { background: rgb(255,255,255,0.04); }
.account-advanced-toggle-row .advanced-toggle-arrow {
  font-size: 11px; transition: transform 0.2s ease;
}
.account-advanced-toggle-row .advanced-toggle-arrow.open { transform: rotate(90deg); }
.account-advanced { padding-top: 4px; }
.account-field-label .icon-btn-sm { vertical-align: middle; margin-left: 4px; }

/* ===== API e Webhooks ===== */
.merchant-divider { border-top: 1px solid rgb(56, 227, 172, 0.08); margin: 16px 0; }
.merchant-text-btn {
  background: none; border: none; color: var(--accent); font-size: 12px;
  cursor: pointer; padding: 0; opacity: 0.8;
  width: auto; margin-bottom: 0;
}
.merchant-text-btn:hover { opacity: 1; }
.merchant-field { margin-bottom: 8px; }
.merchant-field-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.merchant-field-label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; }
.merchant-field-value { font-size: 13px; color: var(--text-primary); display: block; }

.api-keys-list { display: flex; flex-direction: column; gap: 8px; }
.api-key-card {
  background: rgb(255,255,255,0.04); border-radius: 10px; padding: 12px;
}
.api-key-top-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.api-key-label {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.api-key-top-row .badge { flex-shrink: 0; }
.api-key-top-row .btn-revoke-key { flex-shrink: 0; }
.api-key-value {
  display: flex; align-items: center; gap: 6px; margin: 6px 0 4px;
  background: rgb(0,0,0,0.2); border-radius: 6px; padding: 8px 10px; cursor: pointer;
}
.api-key-value .mono {
  font-size: 12px; color: var(--text-primary); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.api-key-value .copy-icon { color: var(--text-tertiary); flex-shrink: 0; }
.api-key-value:hover .copy-icon { color: var(--accent); }
.api-key-detail { font-size: 12px; color: var(--text-tertiary); }
.btn-revoke-key {
  font-size: 12px; padding: 0; background: none; border: none;
  color: var(--color-error); cursor: pointer; opacity: 0.8; margin-left: auto;
  width: auto; margin-bottom: 0;
}
.btn-revoke-key:hover { opacity: 1; }

.badge {
  font-size: 11px; padding: 2px 6px; border-radius: 4px;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap;
}
.badge-green { background: rgb(104, 211, 145, 0.15); color: var(--color-success); }
.badge-yellow { background: rgb(196, 167, 58, 0.15); color: var(--color-warning); }

.merchant-alert {
  background: rgb(196, 167, 58, 0.08); border: 1px solid rgb(196, 167, 58, 0.2);
  color: var(--color-warning); padding: 10px 14px; border-radius: 8px; font-size: 12px; margin-bottom: 12px;
}
.merchant-alert a { color: var(--color-warning); text-decoration: underline; }

/* Key display in modals */
.key-field { margin-bottom: 12px; }
.key-field label { font-size: 12px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 4px; display: block; }
.key-input-wrap {
  display: flex; align-items: center;
  background: var(--bg-input); border: 1px solid rgb(255,255,255,0.08); border-radius: 8px;
  overflow: hidden;
}
.key-input-wrap input {
  flex: 1; background: none; border: none; color: var(--text-primary);
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  padding: 10px 0 10px 10px; margin: 0; outline: none; min-width: 0;
}
.key-input-wrap .btn-copy-key {
  background: none; border: none; color: var(--text-tertiary); cursor: pointer;
  padding: 10px; flex-shrink: 0; display: flex; align-items: center;
}
.key-input-wrap .btn-copy-key:hover { color: var(--accent); }

.danger-btn {
  background: rgb(255, 107, 107, 0.1); color: var(--color-error);
  border: 1px solid rgb(255, 107, 107, 0.25);
  padding: 10px 20px; border-radius: 10px; cursor: pointer; font-size: 14px;
}

/* ===== Sales stats — matches affiliate-stats pattern ===== */
.sales-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0;
}
.sales-stat {
  background: rgb(56, 227, 172, 0.06); border: 1px solid rgb(56, 227, 172, 0.1);
  border-radius: 10px; padding: 12px; text-align: center;
}
.sales-stat-label {
  font-size: 0.72rem; color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.05em; display: block; margin-bottom: 2px;
}
.sales-stat-value {
  font-size: 1rem; font-weight: 600; color: var(--accent); display: block;
  white-space: nowrap;
}

.checkout-desc {
  display: block; font-size: 12px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.checkout-desc.text-muted { color: var(--text-tertiary); font-style: italic; }

.checkout-product-name {
  display: block;
  font-size: 11px;
  color: #38e3ac;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.checkout-metadata-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 500;
  color: #8a9bb0;
  background: rgb(255, 255, 255, 0.06);
  border: 1px solid rgb(255, 255, 255, 0.08);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.checkout-metadata-btn:hover {
  background: rgb(56, 227, 172, 0.1);
  color: #38e3ac;
  border-color: rgb(56, 227, 172, 0.25);
}

.checkout-metadata-btn:active {
  background: rgb(56, 227, 172, 0.18);
}

.checkout-metadata-modal-box {
  max-width: 420px;
}

.checkout-metadata-pre {
  background: rgb(0, 0, 0, 0.3);
  border: 1px solid rgb(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px;
  margin: 12px 0 0;
  font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace;
  font-size: 12px;
  color: #c0cdd8;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow-y: auto;
  max-height: 50vh;
  line-height: 1.5;
}

/* ===== Webhook logs — scrollable like transactions-list ===== */
.webhook-logs-list {
  display: flex; flex-direction: column; gap: 6px;
  flex: 1; min-height: 0; overflow-y: auto;
  overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch;
}
.webhook-log-item {
  background: rgb(255, 255, 255, 0.04); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; transition: background 0.15s;
}
.webhook-log-item:hover { background: rgb(255, 255, 255, 0.08); }
.webhook-log-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.webhook-log-event {
  font-weight: 600; color: var(--text-primary); font-size: 12px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.webhook-log-status { font-size: 12px; font-weight: 600; flex-shrink: 0; }
.webhook-log-attempt { font-size: 12px; color: var(--text-tertiary); flex-shrink: 0; }
.webhook-log-date { font-size: 12px; color: var(--text-tertiary); margin-left: auto; flex-shrink: 0; }
.webhook-log-url {
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-tertiary); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.webhook-log-details { margin-top: 10px; }
.webhook-log-body {
  background: var(--bg-primary); border-radius: 6px; padding: 8px; margin-top: 6px; font-size: 12px; color: var(--text-secondary);
}
.webhook-log-body strong { color: var(--text-bright); font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.webhook-log-body pre {
  margin: 4px 0 0; white-space: pre-wrap; word-break: break-all;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-secondary);
}

.text-danger { color: var(--color-error) !important; }

/* ===== Products ===== */
.merchant-products-card { max-width: 480px; }
.products-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.products-stats {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 16px;
}
.products-stat {
  background: rgb(56, 227, 172, 0.06); border: 1px solid rgb(56, 227, 172, 0.1);
  border-radius: 10px; padding: 12px; text-align: center;
}
.products-stat-label {
  font-size: 0.72rem; color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: 0.05em; display: block; margin-bottom: 2px;
}
.products-stat-value {
  font-size: 1rem; font-weight: 600; color: var(--accent); display: block;
}
.products-list { display: flex; flex-direction: column; gap: 8px; }
.product-card {
  background: rgb(255, 255, 255, 0.04); border-radius: 10px;
  padding: 12px 14px; text-align: left;
}
.product-card-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.product-card-name {
  flex: 1; min-width: 0;
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  color: var(--text-primary); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.product-card-header .badge { flex-shrink: 0; }
.product-card-amount {
  font-size: 16px; font-weight: 700; color: var(--accent); margin-bottom: 2px;
}
.product-card-desc {
  font-size: 12px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: block; margin-bottom: 4px;
}
.product-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgb(255, 255, 255, 0.04);
}
.product-card-checkouts {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.product-card-actions { display: flex; gap: 10px; flex-shrink: 0; }
.product-card-url {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; margin: 6px 0;
  background: rgb(56, 227, 172, 0.08);
  border: 1px solid rgb(56, 227, 172, 0.25);
  border-radius: 8px;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
  min-width: 0;
}
.product-card-url:hover, .product-card-url:active {
  background: rgb(56, 227, 172, 0.14);
  border-color: rgb(56, 227, 172, 0.4);
}
.product-card-url-text {
  flex: 1; min-width: 0;
  font-size: 12px; color: #4fd1c5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.product-card-url-copy {
  display: flex; align-items: center; gap: 4px; flex-shrink: 0;
  font-size: 12px; font-weight: 600; color: var(--accent);
}
.product-card-url-copy .copy-icon { opacity: 0.9; }
.badge-gray { background: rgb(138, 155, 176, 0.15); color: var(--text-secondary); }

/* Merchant CTA button */
.merchant-cta {
  width: 100%; padding: 14px; font-size: 0.9rem; font-weight: 600;
  background: var(--accent); color: var(--bg-primary); border: none;
  border-radius: 10px; cursor: pointer; margin-top: 8px;
}
.merchant-cta:disabled { opacity: 0.6; cursor: not-allowed; }

/* Product edit */
.product-toggle-btn {
  width: 100%; padding: 14px; font-size: 0.9rem; font-weight: 600;
  background: transparent; color: var(--color-error);
  border: 1px solid rgb(255, 107, 107, 0.3);
  border-radius: 10px; cursor: pointer; margin-top: 0;
}
.product-toggle-btn:active { background: rgb(255, 107, 107, 0.08); }
.product-toggle-btn.activate {
  color: var(--accent); border-color: rgb(56, 227, 172, 0.3);
}
.product-toggle-btn.activate:active { background: rgb(56, 227, 172, 0.08); }
.field-hint { font-size: 12px; color: var(--text-tertiary); margin: -8px 0 8px; text-align: left; }
.product-advanced-toggle-row { margin: 4px 0 12px; }
.product-advanced-toggle-row .advanced-toggle-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid rgb(56, 227, 172, 0.12);
  background: rgb(56, 227, 172, 0.04); color: var(--text-secondary);
  margin-bottom: 0;
}
.product-advanced-toggle-row .advanced-toggle-btn:active { background: rgb(255,255,255,0.04); }
.product-advanced-toggle-row .advanced-toggle-arrow {
  font-size: 11px; transition: transform 0.2s ease;
}
.product-advanced-toggle-row .advanced-toggle-arrow.open { transform: rotate(90deg); }
.product-advanced {
  padding-top: 12px;
}

/* Sales product filter chip */
.sales-product-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 6px 6px 12px;
  background: rgb(79, 209, 197, 0.10);
  border: 1px solid rgb(79, 209, 197, 0.22);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #4fd1c5;
  margin-bottom: 8px;
  max-width: 100%;
  min-height: 28px;
}
.sales-product-filter-prefix {
  opacity: 0.75;
  flex-shrink: 0;
}
.sales-product-filter-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sales-product-filter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: rgb(79, 209, 197, 0.15);
  border: none;
  border-radius: 50%;
  color: #4fd1c5;
  cursor: pointer;
  padding: 0;
  /* Override the global `input, button { width: 100%; margin-bottom: 12px; }`
   * — `width: 20px` above pins width, but margin-bottom from the global
   * rule was still pushing the button below the chip's vertical center
   * (the × visually drifted ~6px down). See CLAUDE.md Rule 3. */
  margin: 0;
  transition: background 0.15s;
}
.sales-product-filter button:hover {
  background: rgb(79, 209, 197, 0.3);
}
.sales-product-filter button svg {
  display: block;
}

/* Always use 2x2 KPI grid regardless of viewport.
 * The page card has a fixed `max-width: 420px`, so jumping to a 4-column
 * row at viewport ≥ 768px crammed all four KPIs into ~80px each (the
 * outer viewport grew but the card stayed narrow). 2x2 fits every viewport
 * comfortably. If the merchant area ever gets a wider card layout, this
 * rule should come back as `@media (min-width: ...)` keyed on the new
 * card width, not the viewport width. */

/* Image file selector ---------------------------------------------------- */
/* The row is a plain box. The invisible <input type=file> covers it via
   position:absolute so clicking anywhere triggers the file picker.
   Only ONE state div is visible at a time (.hidden hides the others).
   Each state div is a flex container that lays out icon + text + buttons. */

/* Image file selector ---------------------------------------------------- */
.image-file-row {
  position: relative;
  background: var(--bg-input);
  border: 1px solid rgb(56, 227, 172, 0.1);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: border-color 0.2s;
}
.image-file-row:hover { border-color: rgb(56, 227, 172, 0.3); }
/* Inside account-field, remove extra bottom spacing */
.account-field .image-file-row { margin-bottom: 0; }

.image-file-row .image-file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}

/* State containers — only one visible at a time */
.image-file-empty,
.image-file-selected,
.image-file-existing,
.image-file-uploading {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

/* Icons */
.image-file-empty svg { color: var(--text-tertiary); flex-shrink: 0; }
.image-file-selected svg,
.image-file-existing svg { color: var(--accent); flex-shrink: 0; }

/* Text */
.image-file-empty span { color: var(--text-tertiary); font-size: 14px; }
.image-file-name,
.image-file-existing span {
  color: var(--text-primary);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

/* Remove button (X) — override global button{width:100%;padding:14px;margin-bottom:12px} */
.image-file-remove,
.image-file-remove-existing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: rgb(255, 107, 107, 0.12);
  border: none;
  border-radius: 50%;
  color: var(--color-error);
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
  padding: 0;
  margin: 0;
  font-size: 0;
  transition: background 0.15s;
}
.image-file-remove:hover,
.image-file-remove-existing:hover { background: rgb(255, 107, 107, 0.25); }

/* "Alterar" button — override global button{width:100%;padding:14px;font-size:16px} */
.image-file-change {
  width: auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: rgb(56, 227, 172, 0.1);
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
  z-index: 2;
  flex-shrink: 0;
  transition: background 0.15s;
}
.image-file-change:hover { background: rgb(56, 227, 172, 0.2); }

/* Uploading state */
.image-file-uploading span { color: var(--text-secondary); font-size: 14px; }
.image-file-uploading .spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgb(56, 227, 172, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  flex-shrink: 0;
}
.image-tips-list {
  text-align: left;
  padding-left: 18px;
  margin: 0;
}
.image-tips-list li {
  margin-bottom: 6px;
  line-height: 1.5;
}

/* Deposit limit info */
.deposit-limit-info {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 4px 0 8px;
}
.deposit-limit-info .link {
  font-size: inherit;
}

/* ===== Wallet — onboarding (Fase 1 Sub-fase 3) ===== */

.mensagem.warning {
  color: var(--color-warning);
}
.mensagem.warning:not(:empty) {
  background: rgb(212, 168, 68, 0.1);
  border-left-color: var(--color-warning);
}

/* `.mensagem` already defaults to red text + red left-border above. The
 * explicit `.error` rule pins the styling here so a future override on
 * the bare `.mensagem` selector can't silently degrade the error state
 * back to neutral coloring (the way `.success` / `.info` / `.warning`
 * each pin their own coloring above). */
.mensagem.error {
  color: var(--color-error);
}
.mensagem.error:not(:empty) {
  background: rgb(255, 107, 107, 0.1);
  border-left-color: var(--color-error);
}

.wallet-warning {
  color: var(--color-warning);
}

.wallet-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--accent-subtle);
  cursor: pointer;
  line-height: 1.4;
}
.wallet-consent-row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.wallet-consent-row span {
  min-width: 0;
  color: var(--text-primary);
  font-size: 14px;
}

/* Seed word display — create flow.
   Seed words are the ONLY thing standing between the user and their funds;
   they MUST be fully legible for pen-and-paper transcription. Hence the
   belt-and-suspenders strategy below:
     1. 2-column grid — on the 420px max-card, each cell gets ~170px of
        content width. BIP39 max word length is 8 characters, so even at
        14px monospace (~8.4px/char) there is >2× headroom.
     2. No truncation — `text-overflow: ellipsis` + `white-space: nowrap`
        is the wrong strategy for values the user must read in full.
        Removed entirely: we let the word occupy whatever height it needs.
     3. `overflow-wrap: anywhere` — safety net. If a future change or a
        pathological device (large-text accessibility zoom, narrow
        viewport) makes the word wider than its cell, it wraps cleanly
        to a second line instead of clipping. 100% transcribable either
        way. */
.wallet-seed-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.wallet-seed-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px;
  border-radius: 8px;
  background: var(--bg-input, rgb(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgb(255, 255, 255, 0.08));
  min-width: 0;
}
.wallet-seed-index {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: right;
}
.wallet-seed-word {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.2;
  color: var(--text-primary);
  user-select: none;
  -webkit-user-select: none;
}

/* Wallet identity fingerprint (XXXX-XXXX).
   Public value — the user can copy it to compare, unlike the seed words
   which are explicitly `user-select: none`. Font size is intentionally
   large because it's only 9 characters (incl. hyphen) and legibility on
   paper transcription dominates. */
.wallet-identity-card {
  background: rgb(56, 227, 172, 0.06);
  border: 1px solid rgb(56, 227, 172, 0.14);
  border-radius: 10px;
  padding: 12px;
  margin-top: 16px;
}
.wallet-identity-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.wallet-identity-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-secondary);
}
.wallet-identity-value {
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: var(--text-primary);
  padding: 8px 0;
  user-select: text;
  -webkit-user-select: text;
}
.wallet-identity-hint {
  font-size: 11.5px;
  color: var(--text-secondary);
  margin: 10px 0 0;
  line-height: 1.4;
}

/* Verification — create flow */
.wallet-verify-block {
  margin: 14px 0;
}
.wallet-verify-label {
  margin-bottom: 8px;
  font-size: 14px;
  color: var(--text-primary);
}
.wallet-verify-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.wallet-verify-option {
  padding: 12px 8px;
  border-radius: 8px;
  background: var(--bg-input, rgb(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgb(255, 255, 255, 0.08));
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px;
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.wallet-verify-option:hover:not(:disabled) {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.wallet-verify-option.selected {
  border-color: var(--accent);
  background: var(--accent-muted);
  color: var(--accent);
}
.wallet-verify-option:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Restore flow — 12 input grid with BIP39 autocomplete.
   Mirrors the create-seed grid (plan: "mesmo layout da Tela 2"). 2 cols
   give each input ~150px of typing room at 15px mono — 8-char BIP39 max
   fits with headroom, and the autocomplete dropdown below gets the same
   width so the suggestions are legible. */
.wallet-restore-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.wallet-restore-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.wallet-restore-index {
  flex-shrink: 0;
  color: var(--text-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-width: 20px;
  text-align: right;
}
.wallet-restore-input-wrapper {
  position: relative;
  flex: 1;
  min-width: 0;
}
.wallet-restore-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px;
  border-radius: 8px;
  background: var(--bg-input, rgb(255, 255, 255, 0.04));
  border: 1px solid var(--border, rgb(255, 255, 255, 0.08));
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  line-height: 1.2;
  outline: none;
}
.wallet-restore-input:focus {
  border-color: var(--accent);
}
.wallet-restore-input.invalid {
  border-color: var(--color-error);
}
.wallet-restore-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 10;
  max-height: 160px;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border, rgb(255, 255, 255, 0.12));
  border-radius: 8px;
  box-shadow: 0 6px 16px rgb(0, 0, 0, 0.3);
}
.wallet-restore-option {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  cursor: pointer;
}
.wallet-restore-option:hover {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* ===== Wallet home (view-only Liquid dashboard) ===== */
.wallet-home-total {
  display: grid;
  grid-template-columns: 1fr auto;
  /* Row 1: label + value (left) · icon buttons (right).
     Row 2: sync-state spans both columns so it can center across the
     full card width instead of only within the left-hand main column. */
  gap: 8px 12px;
  padding: 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-accent);
  border-radius: 14px;
  margin-bottom: 16px;
}
.wallet-home-total-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.wallet-home-total-actions {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  justify-self: end;
}
/* History + Settings icons inside the balance card. Override the global
   `input, button { width: 100%; margin-bottom: 12px; padding: 14px }`
   rule so the icons stay square and compact. */
.wallet-home-icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  margin-bottom: 0;
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.wallet-home-icon-btn:hover:not(:disabled) {
  background: var(--bg-elevated-hover);
  color: var(--accent);
  border-color: var(--accent);
}
.wallet-home-icon-btn svg {
  width: 18px;
  height: 18px;
}
.wallet-home-total-label {
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.wallet-home-total-value {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 1.7rem;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}
/* Row 2 of the balance card — wallet identity (left) + sync status (right).
   Identity column hugs its own content (`auto`); sync gets all the
   remaining width (`1fr`). The 2-line error copy ("Falha de sincronização
   / Mostrando último saldo conhecido.") wraps with `white-space: pre-line`
   inside its own column without ever touching the identity column. */
.wallet-home-sync-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}
.wallet-home-identity {
  min-width: 0;
  display: inline-flex; align-items: center; gap: 4px;
  text-align: left;
  font-size: 0.72rem;
  color: var(--text-tertiary);
}
.wallet-home-identity #wallet-home-identity-text {
  flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Tighter `?` next to the identity. The shared .icon-btn-sm is 18px round
   accent-tinted; here we shrink it down so it reads as an inline glyph
   stuck to the fingerprint instead of a separate button orbiting it. */
.wallet-home-identity .icon-btn-sm {
  flex-shrink: 0;
  width: 14px; height: 14px;
  font-size: 10px;
}
.wallet-home-sync-state {
  min-width: 0;
  text-align: right;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  white-space: pre-line;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.wallet-home-sync-state:empty {
  display: none;
}
.wallet-home-sync-state.error {
  color: var(--color-warning);
}
/* Manual-sync icon button — spinning rotation while a sync is in flight.
   Disabled state already dims via the global :disabled rule. */
@keyframes wallet-sync-spin { to { transform: rotate(360deg); } }
.wallet-home-icon-btn.is-syncing svg {
  animation: wallet-sync-spin 0.9s linear infinite;
}

.wallet-home-assets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.wallet-home-asset {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
}
.wallet-home-asset-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  /* No background + no clip. Brand logos (Tether pin, Liquid-Bitcoin
     teardrop, DePix full-brand mark) have their own silhouettes with
     transparent corners — clipping to a circle was chopping off the
     pin/teardrop tips and the dark backdrop was bleeding through every
     transparent pixel. `contain` keeps the full logo inside the box. */
  object-fit: contain;
}
.wallet-home-asset-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.wallet-home-asset-name {
  font-size: 0.95rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet-home-asset-sub {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.wallet-home-asset-amounts {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.wallet-home-asset-amount {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.wallet-home-asset-brl {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* Group header above .wallet-home-actions and .wallet-home-pix-actions —
   "Carteira" / "Pix (BRL)". Small uppercase tertiary text, left-aligned
   so it reads as a section label rather than a heading. */
.wallet-section-header {
  margin: 4px 4px 6px;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
}

.wallet-home-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.wallet-home-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.wallet-home-action:hover:not(:disabled) {
  background: var(--bg-elevated-hover);
  border-color: var(--border-accent);
}
.wallet-home-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.wallet-home-action svg {
  color: var(--accent);
}

/* Pix CTAs that replace the legacy 3-mode toggle. Same 2-up grid as
   wallet-home-actions but visually subordinated (smaller text, no icons). */
.wallet-home-pix-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.wallet-home-pix-action {
  width: 100%; margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.8rem;
  line-height: 1.3;
  padding: 14px 8px;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s;
}
.wallet-home-pix-action:hover:not(:disabled) {
  background: var(--bg-elevated-hover);
  border-color: var(--border-accent);
}
.wallet-home-pix-action svg {
  color: var(--accent);
}
.wallet-home-pix-action small {
  display: block;
  margin-top: 2px;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

/* "← Voltar" link at the bottom of telaDeposito / telaSaque. Reads as a
   text link rather than a primary action — it just steps back to the
   wallet view. Only shown when an integrated wallet exists (script.js
   toggles the .hidden class). */
.wallet-back-link {
  width: auto; margin: 18px auto 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.wallet-back-link:hover { color: #7de4d9; }
.wallet-back-link svg { color: var(--accent); }
/* Center the back link as a block-level element so its `margin: 18px auto 0`
   centers it horizontally even when its parent is flex/grid. */
.wallet-back-link { display: flex; justify-content: center; }

/* Bottom-of-card variant: centered horizontally with breathing room above. */
.wallet-back-link-bottom {
  display: flex;
  width: fit-content;
  margin: 24px auto 4px;
  padding: 10px 14px;
}

/* Generic link-style button used in modals + auxiliary flows (e.g. "Usar PIN"
   fallback inside the unlock modal). Sized to content to avoid the global
   `input, button { width: 100% }` rule. */
.link-btn {
  width: auto;
  margin-bottom: 0;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.9rem;
  padding: 6px 0;
  cursor: pointer;
  text-decoration: none;
}
.link-btn:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* ===== Wallet receive ===== */
.wallet-receive-card {
  text-align: center;
}
.wallet-receive-qr {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  margin: 14px auto;
  padding: 10px;
  background: #fff;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallet-receive-qr img {
  width: 100%;
  height: 100%;
  display: block;
}
.wallet-receive-address {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.wallet-receive-address-text {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--text-bright);
  word-break: break-all;
  text-align: left;
}
.wallet-receive-copy {
  flex-shrink: 0;
  /* override global `input, button { width: 100% }` so this trailing button
     does not consume the flex row and squeeze the address span to 0. */
  width: auto;
  margin-bottom: 0;
  background: var(--accent-subtle);
  color: var(--accent);
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.wallet-receive-copy:hover {
  background: var(--accent-muted);
}

.wallet-action-row {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

/* PIN-lockout modals (warning + final-tentativa) sit on top of every other
 * `.modal` because they fire while the unlock / export / wipe modal is still
 * open underneath. Without an elevated z-index they'd render behind it (DOM
 * order would otherwise win the stacking contest). 2600 picks one tier above
 * the standard 2500 used by .modal. */
#wallet-pin-warning-modal,
#wallet-pin-final-modal {
  z-index: 2600;
}

/* Final-tentativa modal — visual emphasis to slow the user down before they
 * burn their last PIN attempt. Red border + red title contrast against the
 * standard modal so the user can't conflate it with the routine "wrong PIN"
 * inline message. The checkbox forces a deliberate read of the warning copy
 * before the proceed button enables. */
.wallet-pin-final-box {
  border: 2px solid #ff6b6b;
}

#wallet-pin-final-title {
  color: #ff6b6b;
}

.wallet-pin-final-confirm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 12px;
  background: rgb(255, 107, 107, 0.08);
  border: 1px solid rgb(255, 107, 107, 0.3);
  border-radius: 8px;
  cursor: pointer;
}

.wallet-pin-final-confirm input[type="checkbox"] {
  width: auto;
  flex-shrink: 0;
  margin: 2px 0 0;
}

.wallet-pin-final-confirm span {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.4;
}
/* Force every button in the row to the same box dimensions so .secondary
 * (14px padding, font-size 16px, width 100%) and sibling variants like
 * .wallet-settings-danger (which defines its own 8px padding + smaller
 * font-size for use outside modals) render identically when paired. */
.wallet-action-row button {
  flex: 1 1 0;
  width: 100%;
  padding: 14px;
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  border-radius: 10px;
}

/* ===== Wallet transactions list =====
   Filter/toolbar UI reuses .extrato-* classes (see "TRANSACTIONS LIST" block).
   Card + list here mirror [data-view="transactions"] .card so the wallet
   history gets the same scrollable-flex layout the Extrato uses for its
   infinite-scroll sentinel. Keep in sync if the extrato container changes. */
[data-view="wallet-transactions"] .card {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 48px);
  overflow: hidden;
}
.wallet-tx-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
}
/* Wallet-transactions list row layout.
 *
 * Two-column flex: body (title + date + txid stacked) on the left,
 * amount column (one line per asset) on the right.
 *
 * - align-items: flex-start so multi-asset swaps (which produce a
 *   2-line amount column) align cleanly with the body's title row
 *   instead of vertically centering the whole right side.
 * - body uses min-width: 0 so the txid (which has its own ellipsis
 *   inside the abbreviated string) stays on a single line; title
 *   and date are short labels and don't need truncation.
 * - amount column is flex-shrink: 0 so the right-side numbers always
 *   render in full (the user must always see the exact value); the
 *   body absorbs whatever width is left.
 */
.wallet-tx-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.wallet-tx-row-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.wallet-tx-row-title {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 600;
  white-space: nowrap;
}
.wallet-tx-row-date {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  white-space: nowrap;
}
.wallet-tx-row-txid {
  font-size: 0.72rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  font-family: 'Space Grotesk', monospace;
}
.wallet-tx-row-amount {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: 0.9rem;
}
.wallet-tx-amount-line {
  white-space: nowrap;
  color: var(--text-primary);
}
.wallet-tx-amount-line.in {
  color: var(--color-success);
}
.wallet-tx-amount-line.out {
  color: var(--color-error);
}

/* ===== Wallet settings ===== */
/* Clean continuous list with subtle dividers (no card-on-card). Every row
   follows the same shape: icon (left) · title + description (center,
   flex:1) · action button (right). The danger row keeps the same layout
   but tints the title and the action button red. */
.settings-list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
}
.settings-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgb(56, 227, 172, 0.08);
  color: var(--accent);
}
.settings-row-body {
  flex: 1; min-width: 0;
  text-align: left;
}
.settings-row-title {
  display: block;
  margin-bottom: 2px;
  color: var(--text-primary);
  font-size: 0.95rem;
  line-height: 1.3;
}
.settings-row-desc {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.45;
}
.settings-row-action {
  flex-shrink: 0;
  width: auto;
  margin: 2px 0 0;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s;
}
.settings-row-action:hover { background: rgb(56, 227, 172, 0.1); }
.settings-row-link {
  display: inline-block;
  margin-top: 6px;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  width: auto;
  text-align: left;
}
.settings-row-link:hover { color: #7de4d9; }

.settings-row-danger .settings-row-icon {
  background: rgb(255, 107, 107, 0.1);
  color: var(--color-error);
}
.settings-row-danger .settings-row-title { color: var(--color-error); }
.settings-row-action-danger {
  border-color: rgb(255, 107, 107, 0.5);
  color: var(--color-error);
}
.settings-row-action-danger:hover { background: rgb(255, 107, 107, 0.1); }

.settings-back-link {
  width: auto;
  margin: 18px auto 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 4px;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.settings-back-link:hover { color: #7de4d9; }
.settings-back-link svg { color: var(--accent); }
/* Center the back link inside the card */
[data-view="wallet-settings"] .card { text-align: center; }
[data-view="wallet-settings"] .view-title { text-align: center; }
[data-view="wallet-settings"] .mensagem { text-align: left; }

/* ===== Wallet send ===== */
.wallet-send-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.wallet-send-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wallet-send-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.wallet-send-field-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.wallet-send-asset-dropdown { margin-bottom: 0; }
.wallet-send-asset-toggle {
  padding: 10px 12px;
  font-size: 1rem;
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}
.wallet-send-asset-toggle-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.wallet-send-asset-toggle-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
}
.wallet-send-asset-toggle-labels {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.wallet-send-asset-toggle-symbol {
  font-size: 0.98rem;
  color: var(--text-primary);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet-send-asset-toggle-name {
  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet-send-asset-options {
  padding: 4px 0;
}
.wallet-send-asset-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  border-bottom: 1px solid rgb(255, 255, 255, 0.04);
  transition: background 0.15s;
  width: 100%;
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  text-align: left;
  word-break: normal;
  margin: 0;
}
.wallet-send-asset-option:last-child { border-bottom: none; }
.wallet-send-asset-option.selected {
  background: rgb(79, 209, 197, 0.1);
}
.wallet-send-asset-option-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
}
.wallet-send-asset-option-labels {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.2;
}
.wallet-send-asset-option-symbol {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet-send-asset-option-name {
  font-size: 0.78rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wallet-send-asset-option-balance {
  flex-shrink: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) {
  .wallet-send-asset-option:hover {
    background: rgb(79, 209, 197, 0.06);
  }
}
.wallet-send-amount-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.wallet-send-amount-wrap:focus-within {
  border-color: var(--accent);
}
.wallet-send-amount-wrap input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: var(--text-primary);
  /* 16px matches the global input size; both sides of the row sit on the
   * same baseline so the value lines up with the asset suffix. */
  font-size: 1rem;
  line-height: 1;
  outline: none;
  padding: 0;
  margin: 0;
}
.wallet-send-amount-suffix {
  flex-shrink: 0;
  font-size: 0.9rem;
  line-height: 1;
  color: var(--text-secondary);
  font-weight: 500;
}
.wallet-send-balance {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.wallet-send-max {
  flex-shrink: 0;
  width: auto;
  margin: 0;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--accent);
  background: rgb(79, 209, 197, 0.12);
  border: 1px solid rgb(79, 209, 197, 0.25);
  border-radius: 999px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 120ms ease, border-color 120ms ease;
}
.wallet-send-max:hover {
  background: rgb(79, 209, 197, 0.2);
  border-color: var(--accent);
}
.wallet-send-max:active {
  background: rgb(79, 209, 197, 0.28);
}
#wallet-send-dest {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* 1rem = 16px; iOS Safari zooms on focus when <16px. */
  font-size: 1rem;
}
#wallet-send-dest:focus {
  outline: none;
  border-color: var(--accent);
}
.wallet-send-dest-hint {
  margin: 0;
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}
.wallet-send-dest-hint.ok {
  color: var(--color-success);
}
.wallet-send-dest-hint.err {
  color: var(--color-error);
}

/* ===== Endereço + ícone de scanner QR =====
   Earlier iterations stuck the scan button next to the input as a
   sibling flex child. With the global `input, button { width: 100% }`
   rule and the input's tall padding (~46px), the button always read as
   a chunky peer of the input regardless of how we tuned width/height.
   The fix is to drop the flex-sibling pattern entirely: position the
   button absolutely INSIDE the input, right-aligned, vertically
   centered, with the input growing a `padding-right` reservation for
   the icon. Same pattern any modern wallet uses (SideSwap, Aqua). */
.wallet-send-dest-wrap,
.addr-input-wrap,
.swap-btc-addr-wrap {
  position: relative;
  /* Move the input's bottom margin up to the wrap so the wrap's vertical
     center matches the input's vertical center. Otherwise top:50% on the
     absolutely-positioned scan icon ends up below the input's midline
     (the wrap is taller by the input's 12px margin-bottom). */
  margin-bottom: 12px;
}
.wallet-send-dest-wrap #wallet-send-dest,
.addr-input-wrap input,
.swap-btc-addr-wrap input {
  width: 100%;
  /* Reserve 44px on the right edge so the absolutely-positioned scan
     icon doesn't overlap the typed address. */
  padding-right: 44px;
  box-sizing: border-box;
  margin-bottom: 0;
}
.wallet-send-dest-scan,
.addr-input-scan,
.swap-btc-addr-scan {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}
.wallet-send-dest-scan:hover,
.wallet-send-dest-scan:focus,
.addr-input-scan:hover,
.addr-input-scan:focus,
.swap-btc-addr-scan:hover,
.swap-btc-addr-scan:focus {
  color: var(--accent);
  background: rgb(56, 227, 172, 0.1);
  outline: none;
}
.wallet-send-dest-scan svg,
.addr-input-scan svg,
.swap-btc-addr-scan svg {
  display: block;
  width: 18px;
  height: 18px;
}

/* ===== Scanner de QR code (modal reutilizável) ===== */
.qr-scanner-box {
  width: 92%;
  max-width: 420px;
  padding: 16px;
  box-sizing: border-box;
}
.qr-scanner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 8px;
}
.qr-scanner-header h2 {
  margin: 0;
  font-size: 1.1rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qr-scanner-close {
  flex-shrink: 0;
  width: auto;
  margin: 0;
  padding: 4px 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 22px;
  line-height: 1;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.qr-scanner-close:hover,
.qr-scanner-close:focus {
  background: rgb(255, 255, 255, 0.08);
  outline: none;
}
.qr-scanner-state.hidden {
  display: none;
}
.qr-scanner-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
#qr-scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.qr-scanner-reticle {
  position: absolute;
  top: 15%;
  left: 15%;
  right: 15%;
  bottom: 15%;
  border: 2px solid var(--accent);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgb(0, 0, 0, 0.35);
  pointer-events: none;
}
.qr-scanner-hint {
  font-size: 0.88rem;
  color: var(--text-secondary);
  text-align: center;
  margin: 10px 0 0;
  overflow-wrap: anywhere;
}
.qr-scanner-switch {
  width: auto;
  margin-top: 10px;
  margin-bottom: 0;
}
.qr-scanner-validation-msg {
  color: var(--color-error);
  font-size: 0.88rem;
  margin: 10px 0 0;
  text-align: center;
  overflow-wrap: anywhere;
}
.qr-scanner-validation-msg.hidden {
  display: none;
}
.qr-scanner-prompting-text {
  text-align: center;
  color: var(--text-secondary);
  margin: 16px 0;
}
.qr-scanner-error-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgb(255, 107, 107, 0.15);
  color: var(--color-error);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  margin: 12px auto 8px;
}
.qr-scanner-error-msg {
  color: var(--color-error);
  font-size: 0.95rem;
  text-align: center;
  overflow-wrap: anywhere;
  margin: 8px 0 12px;
}
#qr-scanner-retry.hidden {
  display: none;
}
.qr-scanner-footer {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.wallet-send-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.wallet-send-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.88rem;
}
.wallet-send-preview-row span {
  color: var(--text-secondary);
}
.wallet-send-preview-row strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  overflow-wrap: anywhere;
}
.wallet-send-preview-row.total {
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.wallet-send-preview-dest {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--border-subtle);
}
.wallet-send-preview-dest span {
  font-size: 0.78rem;
  color: var(--text-secondary);
}
.wallet-send-preview-dest code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--text-bright);
  word-break: break-all;
}
.wallet-send-preview-dest-final,
.wallet-send-preview-dest-bridge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--text-bright);
  overflow-wrap: anywhere;
  word-break: break-all;
}
.wallet-send-preview-dest-bridge {
  color: var(--text-secondary);
  font-size: 0.72rem;
  margin-top: 2px;
}

/* ===== Wallet send success ===== */
.wallet-send-success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.wallet-send-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgb(104, 211, 145, 0.15);
  color: var(--color-success);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wallet-send-success-field {
  width: 100%;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wallet-send-success-field label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.wallet-send-success-txid {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
}
.wallet-send-success-txid code {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  color: var(--text-bright);
  word-break: break-all;
}
.wallet-send-success-explorer {
  color: var(--accent);
  font-size: 0.88rem;
  text-decoration: none;
}
.wallet-send-success-explorer:hover {
  text-decoration: underline;
}

/* ===== Wallet unlock modal ===== */
.wallet-unlock-biometric {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  margin: 10px 0 0;
}
.wallet-unlock-biometric button {
  width: 100%;
}
.wallet-unlock-pin-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.wallet-unlock-pin-section label {
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.wallet-unlock-pin-section input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 1.1rem;
  letter-spacing: 6px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.wallet-unlock-pin-section input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ====================================================================
   SideShift integration — receive/send shift status panels + modal.
   ==================================================================== */

/* QR for shift addresses — dark frame matching the branded QR canvas
   (#111921 bg) so the white frame doesn't break the dark card. */
.sideshift-qr {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 1;
  margin: 8px auto 16px;
  padding: 12px;
  background: #111921;
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sideshift-qr img { width: 100%; height: 100%; display: block; }

/* Title block above the QR — network label + "endereço de uso único". */
.sideshift-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  text-align: center;
}
.sideshift-header-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.sideshift-header-subtitle {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0;
}

/* Compact "only send X to this address" warning — amber callout. */
.sideshift-warning {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 10px 12px;
  background: rgb(255, 191, 71, 0.08);
  border: 1px solid rgb(255, 191, 71, 0.28);
  border-radius: 10px;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-primary);
}
.sideshift-warning-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: #ffbf47;
}
.sideshift-warning strong { color: #ffbf47; }

/* Info rows: clean key/value list with subtle separators. */
.sideshift-info-list {
  display: flex;
  flex-direction: column;
  margin: 12px 0;
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-elevated);
}
.sideshift-info-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: 0.88rem;
  min-height: 40px;
  box-sizing: border-box;
}
.sideshift-info-list-row + .sideshift-info-list-row {
  border-top: 1px solid var(--border-subtle);
}
.sideshift-info-list-row > span {
  color: var(--text-secondary);
  flex-shrink: 0;
}
.sideshift-info-list-row > strong {
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

/* ===== SWAP / CONVERTER ===== */

/* 3-button variant — wider wallet-home-actions grid */
.wallet-home-actions--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Swap modal box — taller than standard 380px modal */
.swap-modal-box {
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.swap-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 20px 0;
  margin-bottom: 16px;
}

.swap-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0;
}

/* Close button — override global button { width:100% } */
.swap-close-btn {
  width: auto;
  margin-bottom: 0;
  background: transparent;
  border: none;
  padding: 6px;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.swap-close-btn:hover { background: var(--bg-elevated-hover); color: var(--text-primary); }

.swap-panel {
  width: 100%;
  padding: 0 20px 20px;
}

/* FROM / TO asset panels */
.swap-side {
  background: var(--bg-input, #0e2a2b);
  border: 1px solid var(--border-subtle, rgb(255,255,255,0.08));
  border-radius: 14px;
  padding: 14px 16px;
  /* Same height for FROM and TO regardless of which sub-row chrome is
     present (R$ equiv, MAX button). 122px ≈ label + amount row + sub. */
  min-height: 122px;
  display: flex;
  flex-direction: column;
}

.swap-side--from {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  margin-bottom: 4px;
}

.swap-side--to {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.swap-side-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, rgb(255,255,255,0.4));
  margin-bottom: 10px;
}

.swap-balance-label {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

.swap-side-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Asset selector button — override global button { width:100%; margin-bottom:12px } */
.swap-asset-btn {
  width: auto;
  margin-bottom: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-elevated, rgb(255,255,255,0.06));
  border: 1px solid var(--border-accent, rgb(79,209,197,0.3));
  border-radius: 20px;
  padding: 6px 10px 6px 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.swap-asset-btn:hover:not(:disabled) {
  background: var(--bg-elevated-hover, rgb(255,255,255,0.1));
  border-color: var(--accent, #4fd1c5);
}

.swap-asset-icon {
  border-radius: 50%;
  flex-shrink: 0;
  display: block;
}

.swap-asset-symbol {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text-primary);
  white-space: nowrap;
}

.swap-asset-chevron {
  color: var(--text-secondary);
  flex-shrink: 0;
}

/* Amount input — override global input { width:100%; margin-bottom:12px } */
.swap-amount-input {
  flex: 1;
  min-width: 0;
  width: auto;
  margin-bottom: 0;
  background: transparent;
  border: none;
  outline: none;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  padding: 0;
}
.swap-amount-input::placeholder { color: var(--text-dim, rgb(255,255,255,0.2)); }

/* Read-only receive amount */
.swap-amount-display {
  flex: 1;
  min-width: 0;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.swap-side-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto; /* push to bottom of swap-side */
  padding-top: 8px;
  /* Reserve constant height so empty TO-side sub doesn't collapse the box. */
  min-height: 24px;
}

.swap-brl-equiv {
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Status chip: colored dot + label. */
.sideshift-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--text-primary);
}
.sideshift-status::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgb(79, 209, 197, 0.18);
}
.sideshift-status[data-state="waiting"]::before,
.sideshift-status[data-state="pending"]::before,
.sideshift-status[data-state="processing"]::before,
.sideshift-status[data-state="settling"]::before {
  background: #ffbf47;
  box-shadow: 0 0 0 3px rgb(255, 191, 71, 0.18);
  animation: sideshift-pulse 1.6s ease-in-out infinite;
}
.sideshift-status[data-state="settled"]::before {
  background: #68d391;
  box-shadow: 0 0 0 3px rgb(104, 211, 145, 0.18);
}
.sideshift-status[data-state="refund"]::before,
.sideshift-status[data-state="refunding"]::before,
.sideshift-status[data-state="refunded"]::before,
.sideshift-status[data-state="expired"]::before {
  background: #ff6b6b;
  box-shadow: 0 0 0 3px rgb(255, 107, 107, 0.18);
}
@keyframes sideshift-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Support action: discrete centered "Ver no SideShift" text link.
   Replaces the previous outlined-chip pair (link + Copiar ID button) —
   the secondary action was redundant (URL contains the order id), and
   chip styling drew more attention than the action warrants. */
.sideshift-support-actions {
  display: flex;
  justify-content: center;
  margin-top: 14px;
}
.sideshift-text-link {
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 4px 8px;
  margin: 0;
  width: auto;
  line-height: 1.3;
}
.sideshift-text-link:hover {
  color: var(--accent);
}

/* FAQ accordion — left-aligned content, no focus rectangle, subtle. */
.sideshift-faq {
  margin-top: 18px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 6px;
}
.sideshift-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 4px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  outline: none;
}
.sideshift-faq summary::-webkit-details-marker { display: none; }
.sideshift-faq summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
.sideshift-faq summary::after {
  content: "+";
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text-secondary);
  transition: transform 0.18s ease;
}
.sideshift-faq[open] summary::after { content: "−"; }
.sideshift-faq-body {
  padding: 4px 4px 10px;
  text-align: left;
}
.sideshift-faq-body p {
  margin: 0 0 10px;
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-secondary);
  text-align: left;
}
.sideshift-faq-body p:last-child { margin-bottom: 0; }
.sideshift-faq-body strong { color: var(--text-primary); }

/* Pending-shift banner on the wallet home — visible only when there's a
   non-terminal shift (send or receive) on file. Tapping it routes to the
   shift's detail view so the user can copy the address, check status,
   or cancel. */
.wallet-shift-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 12px 0 0;
  padding: 12px 14px;
  background: rgb(79, 209, 197, 0.08);
  border: 1px solid rgb(79, 209, 197, 0.32);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
}
.wallet-shift-banner:hover { background: rgb(79, 209, 197, 0.14); }
.wallet-shift-banner-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgb(79, 209, 197, 0.18);
  color: var(--accent);
}
.wallet-shift-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.3;
}

/* MAX button — override global */
.swap-max-btn {
  width: auto;
  margin-bottom: 0;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border-accent, rgb(79,209,197,0.3));
  border-radius: 6px;
  color: var(--accent, #4fd1c5);
  font-size: 10px;
  font-weight: 700;
  padding: 3px 7px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s;
}
.swap-max-btn:hover { background: rgb(79,209,197,0.1); }

/* Flip direction button */
.swap-direction {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 4px 0;
  /* Reserve a constant minimum height so the form rhythm is the same with
     and without a quote — pill appears in-place without shifting layout. */
  min-height: 40px;
}
/* Tighten the spacing between FROM panel and the flip button. */
.swap-side--from { margin-bottom: 2px; }
.swap-side--to   { margin-top: 2px; }

/* Inline rate pill — sits next to the flip button when a quote is held.
   Mirrors SideSwap mobile's "1 L-BTC = 75850.58 USDt" badge. */
.swap-rate-pill {
  display: inline-flex;
  align-items: center;
  background: var(--bg-elevated, rgb(255,255,255,0.06));
  border: 1px solid var(--border-subtle, rgb(255,255,255,0.10));
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-bright);
  white-space: nowrap;
  max-width: calc(100% - 50px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.swap-rate-pill.hidden { display: none; }

/* Inline (recoverable) error message inside the form. Sits above the CTA. */
.swap-inline-msg {
  background: rgb(255, 107, 107, 0.08);
  border: 1px solid rgb(255, 107, 107, 0.30);
  color: var(--color-error, #ff6b6b);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.4;
}
.swap-inline-msg.hidden { display: none; }

/* Override global button { width:100%; margin-bottom:12px } */
.swap-flip-btn {
  width: 36px;
  height: 36px;
  margin-bottom: 0;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-card, #0a1f20);
  border: 2px solid var(--border-accent, rgb(79,209,197,0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.25s, border-color 0.15s;
}
.swap-flip-btn:hover {
  background: var(--bg-elevated-hover, rgb(255,255,255,0.1));
  border-color: var(--accent, #4fd1c5);
  transform: rotate(180deg);
}
.swap-flip-btn svg { color: var(--accent, #4fd1c5); }

/* BTC address input for peg-out */
.swap-btc-addr-row {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.swap-btc-addr-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* Override global input */
.swap-btc-addr-input {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0;
  background: var(--bg-input, #0e2a2b);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: monospace;
  padding: 10px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.swap-btc-addr-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Compact quote info — single row of fee/network/timer chips below TO panel.
   Replaces the previous 3-line block; primary rate now lives in the pill
   inline with the flip button (.swap-rate-pill). */
.swap-quote-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--bg-elevated, rgb(255,255,255,0.04));
  border: 1px solid var(--border-subtle, rgb(255,255,255,0.08));
  border-radius: 10px;
  font-size: 12px;
  flex-wrap: wrap;
}
.swap-quote-info.hidden { display: none; }
.swap-quote-info-item {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}
.swap-quote-info-label {
  color: var(--text-secondary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.swap-quote-info-value {
  color: var(--text-bright);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.swap-timer { color: var(--color-warning, #e9b44c); font-weight: 700; }
.swap-timer--urgent { color: var(--color-error, #ff6b6b); }

/* Peg-out BTC network fee picker */
.swap-fee-picker {
  margin: 12px 0;
}
.swap-fee-picker.hidden { display: none; }
.swap-fee-picker-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.swap-fee-picker-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.swap-fee-option {
  width: auto;
  margin-bottom: 0;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid var(--border-subtle, rgb(255, 255, 255, 0.10));
  background: var(--bg-elevated, rgb(255, 255, 255, 0.04));
  color: var(--text-primary);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background 0.15s, border-color 0.15s;
  min-width: 0;   /* shrink within grid track */
}
.swap-fee-option:hover { background: var(--bg-elevated-hover, rgb(255, 255, 255, 0.08)); }
.swap-fee-option.selected {
  border-color: var(--accent, #4fd1c5);
  background: rgb(79, 209, 197, 0.08);
}
.swap-fee-option-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-bright);
}
.swap-fee-option-eta {
  font-size: 10px;
  color: var(--text-secondary);
}
.swap-fee-option-amount {
  font-size: 10px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Peg-out preview panel */
.swap-pegout-preview {
  margin: 12px 0;
  padding: 12px 14px;
  background: var(--bg-elevated, rgb(255, 255, 255, 0.04));
  border: 1px solid var(--border-subtle, rgb(255, 255, 255, 0.10));
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.swap-pegout-preview.hidden { display: none; }
.swap-pegout-preview-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  gap: 8px;
}
.swap-pegout-preview-row > span:first-child {
  color: var(--text-secondary);
}
.swap-pegout-preview-row > span:last-child {
  color: var(--text-bright);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 0;
  word-break: break-all;
}

/* Flow speed badge */
.swap-flow-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  margin: 12px 0 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Consistent spacing for the BTC address row when present (peg-out). */
.swap-btc-addr-row { margin-top: 14px; }
/* CTA spacing so the form has consistent rhythm whether or not
   the optional BTC address row is visible. */
#swap-cta { margin-top: 14px; }

.swap-flow-badge--fast {
  background: rgb(104, 211, 145, 0.12);
  border: 1px solid rgb(104, 211, 145, 0.28);
  color: #68d391;
}

.swap-flow-badge--slow {
  background: rgb(233, 180, 76, 0.12);
  border: 1px solid rgb(233, 180, 76, 0.28);
  color: #e9b44c;
}

/* Confirming panel */
.swap-confirming-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px 8px 16px;
  text-align: center;
}

.swap-confirming-msg {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin: 0;
}

/* Success panel */
.swap-success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 8px 8px;
  text-align: center;
}

.swap-success-icon {
  font-size: 3rem;
  color: #68d391;
  line-height: 1;
}

.swap-success-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0;
}

.swap-success-body {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
  overflow-wrap: anywhere;
}

/* Override global a / link styles */
.swap-tx-link {
  display: inline-block;
  color: var(--accent, #4fd1c5);
  font-size: 0.85rem;
  text-decoration: underline;
  margin-top: 4px;
}
.swap-tx-link:hover { opacity: 0.8; }

/* Peg-in address panel */
.swap-pegin-content {
  padding: 4px 0 12px;
}

.swap-pegin-header-icon {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 12px;
  line-height: 1;
}

/* Branded QR — same visual treatment as the receive QR (teal on dark
   with a Bitcoin logo embedded in the center). */
.swap-pegin-qr-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 16px;
  background: #111921;
  border-radius: 12px;
  padding: 12px;
  width: fit-content;
}
.swap-pegin-qr-img {
  width: 220px;
  height: 220px;
  display: block;
  border-radius: 6px;
}
.swap-pegin-qr-img.hidden { display: none; }
.swap-pegin-qr-loading,
.swap-pegin-qr-error {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--text-secondary);
}
.swap-pegin-qr-error { color: var(--color-error, #ff6b6b); }
.swap-pegin-qr-loading.hidden,
.swap-pegin-qr-error.hidden { display: none; }

/* Confirmation rules list — small, secondary text, bullet markers inside. */
.swap-pegin-notes {
  margin: 14px 0 0;
  padding: 12px 14px 12px 30px;
  background: var(--bg-elevated, rgb(255,255,255,0.04));
  border: 1px solid var(--border-subtle, rgb(255,255,255,0.08));
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  list-style: disc;
}
.swap-pegin-notes li { margin: 0 0 6px; }
.swap-pegin-notes li:last-child { margin-bottom: 0; }
.swap-pegin-notes strong { color: var(--text-bright); }

/* Cancel peg-in tracking — secondary text-button below the primary CTA.
   Smaller, muted, no border. */
.swap-pegin-cancel-btn {
  width: 100%;
  margin-top: 8px;
  margin-bottom: 0;
  padding: 8px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.swap-pegin-cancel-btn:hover { color: var(--color-error, #ff6b6b); }

/* Cancel-peg-in confirmation modal — danger button uses error color. */
.swap-pegin-cancel-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.swap-pegin-cancel-actions button {
  flex: 1;
  width: auto;
  margin-bottom: 0;
}
.btn-danger {
  background: var(--color-error, #ff6b6b);
  color: #fff;
  border: 1px solid var(--color-error, #ff6b6b);
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.btn-danger:hover { opacity: 0.85; }

/* Wallet-home banner shown when a peg-in is in flight. Tap → reopens the
   converter on the tracking panel. */
.wallet-pegin-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 0 0 14px;
  padding: 10px 12px;
  background: rgb(247, 147, 26, 0.08);   /* Bitcoin orange tint */
  border: 1px solid rgb(247, 147, 26, 0.30);
  border-radius: 12px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.wallet-pegin-banner.hidden { display: none; }
.wallet-pegin-banner:hover {
  background: rgb(247, 147, 26, 0.14);
  border-color: rgb(247, 147, 26, 0.50);
}
.wallet-pegin-banner-icon {
  flex-shrink: 0;
  color: #f7931a;
}
.wallet-pegin-banner-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  line-height: 1.3;
}
.wallet-pegin-banner-text strong {
  font-weight: 700;
  color: var(--text-bright);
}
.wallet-pegin-banner-sub {
  font-size: 11px;
  color: var(--text-secondary);
}
.wallet-pegin-banner-chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.swap-pegin-title {
  font-size: 1rem;
  color: var(--text-primary);
  margin: 0 0 12px;
  text-align: center;
}

.swap-pegin-warning {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgb(233, 180, 76, 0.08);
  border-left: 3px solid #e9b44c;
  border-radius: 0 6px 6px 0;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.45;
}
.swap-pegin-warning svg { flex-shrink: 0; color: #e9b44c; margin-top: 1px; }

/* BTC address display — must break-all, no spaces in 62-char address */
.swap-pegin-addr-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

.swap-pegin-addr {
  flex: 1;
  min-width: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 12px;
  color: var(--text-bright);
  word-break: break-all;
  line-height: 1.5;
}

/* Copy button in peg-in row — override global */
.swap-pegin-copy-btn {
  width: auto;
  margin-bottom: 0;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.swap-pegin-copy-btn:hover { background: var(--bg-elevated-hover); color: var(--text-primary); }

.swap-pegin-status {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 4px 0 0;
  text-align: center;
}

/* Error panel buttons — secondary style override */
.btn-secondary {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s;
  margin-bottom: 8px;
}
.btn-secondary:hover { background: var(--bg-elevated-hover); }

/* Bottom sheet (asset picker) */
.bottom-sheet {
  position: fixed;
  inset: 0;
  z-index: 2600;
}

.bottom-sheet.hidden { display: none !important; }

.bottom-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0, 0, 0, 0.65);
}

.bottom-sheet-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-modal, #112626);
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 75vh;
  overflow-y: auto;
  animation: slideUp 0.22s ease-out;
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

.bottom-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.bottom-sheet-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-bright);
  margin: 0;
}

.swap-asset-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Asset sheet option — override global button { width:100%; margin-bottom:12px } */
.swap-asset-sheet-option {
  width: 100%;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elevated, rgb(255,255,255,0.04));
  border: 1px solid var(--border-subtle, rgb(255,255,255,0.08));
  border-radius: 12px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.swap-asset-sheet-option:hover:not(.swap-asset-sheet-option--disabled) {
  border-color: var(--border-accent);
}
.swap-asset-sheet-option.selected {
  border-color: var(--accent, #4fd1c5);
  background: rgb(79, 209, 197, 0.06);
}
/* Incompatible with the current other-side asset (e.g. picking DePix while
   the other side is BTC — only L-BTC is valid in that case). */
.swap-asset-sheet-option--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.swap-asset-sheet-option-hint {
  display: block;
  font-size: 10px;
  color: var(--color-warning, #e9b44c);
  margin-top: 2px;
  font-style: italic;
}

/* Label block inside option — needs min-width: 0 as flex child */
.swap-asset-sheet-option-labels {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wallet-shift-banner-text strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}
.wallet-shift-banner-text span {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.3;
}
.wallet-shift-banner-chevron {
  flex-shrink: 0;
  color: var(--text-secondary);
}

/* Destructive secondary button used to cancel/remove a SideShift order
   from local tracking. Sits at the bottom of the card, just above the
   centered back link. Outline style in red so it doesn't compete with
   the accent-colored primary actions above. */
.sideshift-cancel-btn {
  display: block;
  width: 100%;
  margin: 18px 0 0;
  padding: 12px 14px;
  background: transparent;
  border: 1px solid var(--color-error);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-error);
  cursor: pointer;
}
.sideshift-cancel-btn:hover {
  background: rgb(255, 107, 107, 0.08);
}
.sideshift-cancel-btn:focus-visible {
  outline: 2px solid var(--color-error);
  outline-offset: 2px;
}

/* Stuck/refund banners — already match `.mensagem.error` shape; keep as is
   but tighten margin so they don't drift away from the related row. */
#wallet-receive-shift-stuck,
#wallet-receive-shift-refund {
  margin: 12px 0 0;
  font-size: 0.85rem;
}

#wallet-shift-refund-input {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
}

/* Network dropdown reuses .wallet-send-asset-dropdown styles; nothing
   network-specific needed beyond what's already declared. */

.swap-asset-sheet-option-symbol {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.swap-asset-sheet-option-name {
  display: block;
  font-size: 0.75rem;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swap-asset-sheet-option-balance {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.swap-asset-sheet-option-badge {
  flex-shrink: 0;
  background: rgb(233, 180, 76, 0.15);
  border: 1px solid rgb(233, 180, 76, 0.3);
  color: #e9b44c;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}