/* =========================================================================
   Miracle Token Engine — Frontend Styles  v2.0.0
   Mobile-first, dark-mode aware, matches Miracle App shell
   ========================================================================= */

/* ── Custom Properties ──────────────────────────────────────────────────── */
.mte-app {
  --mte-primary:    #f5c842;
  --mte-primary-dk: #d4a82a;
  --mte-bg:         #ffffff;
  --mte-bg2:        #f7f8fa;
  --mte-bg3:        #eef0f4;
  --mte-border:     #e2e5ec;
  --mte-text:       #111827;
  --mte-text2:      #6b7280;
  --mte-text3:      #9ca3af;
  --mte-card:       #ffffff;
  --mte-shadow:     0 2px 12px rgba(0,0,0,.07);
  --mte-shadow-lg:  0 8px 32px rgba(0,0,0,.12);
  --mte-radius:     14px;
  --mte-radius-sm:  8px;
  --mte-green:      #16a34a;
  --mte-red:        #dc2626;
  --mte-blue:       #2563eb;
  --mte-orange:     #ea580c;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  color: var(--mte-text);
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px 80px;
}

/* Dark mode support (Miracle App shell) */
body.dark-mode .mte-app,
html[data-theme="dark"] .mte-app {
  --mte-bg:     #0f172a;
  --mte-bg2:    #1e293b;
  --mte-bg3:    #334155;
  --mte-border: #334155;
  --mte-text:   #f1f5f9;
  --mte-text2:  #94a3b8;
  --mte-text3:  #64748b;
  --mte-card:   #1e293b;
  --mte-shadow: 0 2px 12px rgba(0,0,0,.3);
}

/* ── Page header ────────────────────────────────────────────────────────── */
.mte-page-header { margin: 24px 0 20px; }
.mte-page-header h2 { font-size: 22px; font-weight: 700; margin: 0 0 6px; color: var(--mte-text); }
.mte-page-sub { color: var(--mte-text2); font-size: 14px; margin: 0; }

/* ── Card ────────────────────────────────────────────────────────────────── */
.mte-card {
  background: var(--mte-card);
  border: 1px solid var(--mte-border);
  border-radius: var(--mte-radius);
  padding: 24px;
  box-shadow: var(--mte-shadow);
  margin-bottom: 20px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.mte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  border-radius: var(--mte-radius-sm);
  font-size: 14px;
  font-weight: 600;
  padding: 10px 18px;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
  white-space: nowrap;
}
.mte-btn:disabled { opacity: .5; cursor: not-allowed; }
.mte-btn-primary  { background: var(--mte-primary); color: #111; }
.mte-btn-primary:hover:not(:disabled) { background: var(--mte-primary-dk); }
.mte-btn-outline  { background: transparent; border: 1.5px solid var(--mte-border); color: var(--mte-text); }
.mte-btn-outline:hover:not(:disabled) { border-color: var(--mte-primary); color: var(--mte-primary); }
.mte-btn-danger   { background: #fee2e2; color: var(--mte-red); }
.mte-btn-danger:hover:not(:disabled) { background: var(--mte-red); color: #fff; }
.mte-btn-sm       { padding: 6px 12px; font-size: 13px; border-radius: 6px; }
.mte-btn-full     { width: 100%; }
.mte-btn-large    { padding: 14px 24px; font-size: 16px; }
.mte-btn-icon     { padding: 8px 14px; font-size: 20px; background: var(--mte-bg2); color: var(--mte-text); border: 1px solid var(--mte-border); }

/* ── Form elements ───────────────────────────────────────────────────────── */
.mte-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--mte-bg2);
  border: 1.5px solid var(--mte-border);
  border-radius: var(--mte-radius-sm);
  padding: 10px 14px;
  font-size: 15px;
  color: var(--mte-text);
  transition: border-color .15s;
  outline: none;
  -webkit-appearance: none;
}
.mte-input:focus { border-color: var(--mte-primary); }
.mte-input.mte-input-sm { padding: 7px 11px; font-size: 13px; }
.mte-uppercase { text-transform: uppercase; }
.mte-form-group { margin-bottom: 16px; }
.mte-form-group label { display: block; font-size: 13px; font-weight: 600; color: var(--mte-text2); margin-bottom: 6px; }
.mte-form-value { font-size: 15px; font-weight: 700; color: var(--mte-text); }
.mte-hint { display: block; font-size: 12px; color: var(--mte-text3); margin-top: 4px; }
.mte-required { color: var(--mte-red); }
.mte-form-section { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--mte-border); }
.mte-form-section:last-child { border-bottom: none; }
.mte-form-section h3 { font-size: 15px; font-weight: 700; margin: 0 0 16px; color: var(--mte-text); }
.mte-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 520px) { .mte-form-row-2 { grid-template-columns: 1fr; } }
.mte-submit-row { margin-top: 8px; }

/* ── Login wall ──────────────────────────────────────────────────────────── */
.mte-login-wall {
  text-align: center;
  padding: 48px 20px;
  background: var(--mte-bg2);
  border-radius: var(--mte-radius);
  border: 1px dashed var(--mte-border);
}
.mte-login-icon { font-size: 48px; margin-bottom: 12px; }
.mte-login-wall p { color: var(--mte-text2); margin-bottom: 20px; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.mte-empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--mte-text2);
}
.mte-empty-icon { font-size: 48px; display: block; margin-bottom: 12px; }
.mte-empty-state p { margin: 0 0 16px; }

/* ── Toast notifications ─────────────────────────────────────────────────── */
.mte-toast {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: var(--mte-radius-sm);
  font-size: 14px;
  font-weight: 500;
  display: none;
}
.mte-toast.mte-toast-success { display: block; background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.mte-toast.mte-toast-error   { display: block; background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.mte-toast.mte-toast-loading { display: block; background: var(--mte-bg3); color: var(--mte-text2); }

/* ── Notice ──────────────────────────────────────────────────────────────── */
.mte-notice { padding: 12px 16px; border-radius: var(--mte-radius-sm); margin-bottom: 20px; font-size: 14px; }
.mte-notice-warning { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }

/* ── Badge ───────────────────────────────────────────────────────────────── */
.mte-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.mte-badge-frozen  { background: #dbeafe; color: #1e40af; }
.mte-badge-pending { background: #fef3c7; color: #92400e; }

/* ── Wallet ──────────────────────────────────────────────────────────────── */
.mte-wallet-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 0 24px;
}
.mte-avatar {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--mte-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #111;
  flex-shrink: 0;
}
.mte-wallet-name { font-size: 19px; font-weight: 700; margin: 0; }
.mte-wallet-sub  { color: var(--mte-text2); font-size: 13px; margin: 0; }
.mte-wallet-token-count { margin-left: auto; text-align: center; }
.mte-wallet-token-count span { display: block; font-size: 28px; font-weight: 800; color: var(--mte-primary); line-height: 1; }
.mte-wallet-token-count small { font-size: 11px; color: var(--mte-text2); text-transform: uppercase; letter-spacing: .05em; }

.mte-token-cards { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 540px) { .mte-token-cards { grid-template-columns: 1fr 1fr; } }

.mte-token-card {
  background: var(--mte-bg2);
  border: 1.5px solid var(--mte-border);
  border-radius: var(--mte-radius);
  padding: 18px;
  transition: border-color .2s;
}
.mte-token-card:hover { border-color: var(--mte-primary); }
.mte-token-card.mte-frozen  { opacity: .65; }
.mte-token-card.mte-inactive { opacity: .65; }

.mte-token-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.mte-token-logo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.mte-token-logo-placeholder {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mte-primary), #f97316);
  color: #111; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mte-token-symbol { display: block; font-size: 14px; font-weight: 800; }
.mte-token-name   { display: block; font-size: 12px; color: var(--mte-text2); }
.mte-token-balance { margin-bottom: 4px; }
.mte-balance-num  { font-size: 26px; font-weight: 800; color: var(--mte-text); }
.mte-balance-sym  { font-size: 14px; font-weight: 600; color: var(--mte-text2); margin-left: 4px; }
.mte-token-value  { font-size: 13px; color: var(--mte-text3); margin-bottom: 14px; }
.mte-token-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Swap page ───────────────────────────────────────────────────────────── */
.mte-swap-card { padding: 28px; }
.mte-swap-panel { display: flex; flex-direction: column; gap: 4px; align-items: center; margin-bottom: 20px; }
@media (min-width: 540px) {
  .mte-swap-panel { flex-direction: row; align-items: flex-start; gap: 12px; }
  .mte-swap-box { flex: 1; }
}
.mte-swap-box label { display: block; font-size: 12px; font-weight: 700; color: var(--mte-text2); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.mte-swap-amount-input { margin-top: 10px; font-size: 22px; font-weight: 700; }
.mte-swap-receive-box {
  margin-top: 10px;
  background: var(--mte-bg3);
  border: 1.5px solid var(--mte-border);
  border-radius: var(--mte-radius-sm);
  padding: 12px 14px;
  min-height: 48px;
  display: flex; align-items: center; gap: 8px;
}
#mte-swap-receive-amount { font-size: 22px; font-weight: 700; color: var(--mte-primary); }
.mte-swap-arrow { display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.mte-swap-from-balance { font-size: 12px; color: var(--mte-text3); margin-top: 4px; }

.mte-swap-preview {
  background: var(--mte-bg2);
  border-radius: var(--mte-radius-sm);
  padding: 16px;
  margin-bottom: 18px;
  border: 1px solid var(--mte-border);
}
.mte-swap-preview-row { display: flex; justify-content: space-between; font-size: 14px; padding: 4px 0; color: var(--mte-text2); }
.mte-swap-preview-row strong { color: var(--mte-text); }
.mte-swap-net { font-weight: 700; font-size: 15px; color: var(--mte-text) !important; border-top: 1px solid var(--mte-border); padding-top: 10px !important; margin-top: 6px; }
.mte-swap-net strong { color: var(--mte-primary) !important; font-size: 17px; }

/* ── Marketplace — Premium Redesign ─────────────────────────────────────── */
#mte-marketplace {
  --mkt-navy: #0f1a2e;
  --mkt-blue: #2563eb;
  --mkt-gold: #D4AF37;
  --mkt-green: #059669;
  --mkt-red: #dc2626;
  padding-bottom: 40px;
}

/* Hero header */
#mte-marketplace .mte-mkt-hero {
  background: linear-gradient(135deg, #0f1a2e 0%, #1a2744 55%, #2563eb 100%);
  border-radius: 20px;
  padding: 28px 22px 30px;
  margin-bottom: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
#mte-marketplace .mte-mkt-hero::before {
  content: '';
  position: absolute; top: -50px; right: -50px;
  width: 180px; height: 180px; border-radius: 50%;
  background: rgba(212,175,55,.13); pointer-events: none;
}
#mte-marketplace .mte-mkt-hero::after {
  content: '';
  position: absolute; bottom: -60px; left: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(37,99,235,.18); pointer-events: none;
}
#mte-marketplace .mte-mkt-hero-inner { position: relative; z-index: 1; }
#mte-marketplace .mte-mkt-hero h2 {
  font-size: 1.45rem; font-weight: 900; margin: 0 0 5px; letter-spacing: -.3px;
}
#mte-marketplace .mte-mkt-hero p {
  margin: 0 0 14px; font-size: 13.5px; color: rgba(255,255,255,.72);
}
#mte-marketplace .mte-mkt-hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
#mte-marketplace .mte-mkt-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 20px;
  font-size: 11.5px; font-weight: 700;
}
#mte-marketplace .mte-mkt-badge-escrow {
  background: rgba(5,150,105,.2); border: 1px solid rgba(5,150,105,.4); color: #6ee7b7;
}
#mte-marketplace .mte-mkt-badge-p2p {
  background: rgba(212,175,55,.18); border: 1px solid rgba(212,175,55,.35); color: #fde68a;
}

/* Filter bar */
#mte-marketplace .mte-mkt-filters {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  background: var(--mte-card);
  border: 1px solid var(--mte-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 20px;
  box-shadow: var(--mte-shadow);
}
#mte-marketplace .mte-mkt-filters .mte-input {
  width: auto; flex: 1; min-width: 130px;
  border-radius: 10px; font-size: 13.5px;
}
#mte-marketplace .mte-mkt-filters .mte-btn { flex-shrink: 0; border-radius: 10px; }

/* Listings grid */
#mte-marketplace .mte-listings-grid {
  display: grid; grid-template-columns: 1fr; gap: 14px;
}
@media (min-width: 540px) {
  #mte-marketplace .mte-listings-grid { grid-template-columns: 1fr 1fr; }
}

/* Listing card redesign */
#mte-marketplace .mte-listing-card {
  background: var(--mte-card);
  border: 1.5px solid var(--mte-border);
  border-radius: 16px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: var(--mte-shadow);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
#mte-marketplace .mte-listing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0,0,0,.12);
  border-color: var(--mte-blue);
}

#mte-marketplace .mte-listing-top {
  background: linear-gradient(135deg, #0f1a2e 0%, #1a2744 100%);
  padding: 16px 18px 14px;
  display: flex; align-items: center; justify-content: space-between;
}
#mte-marketplace .mte-listing-logo-wrap {
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 2px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0;
  overflow: hidden;
}
#mte-marketplace .mte-listing-logo-wrap img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
#mte-marketplace .mte-listing-token-info { flex: 1; padding: 0 12px; }
#mte-marketplace .mte-listing-symbol {
  display: block; font-size: 16px; font-weight: 800; color: #fff;
}
#mte-marketplace .mte-listing-name {
  display: block; font-size: 11px; color: rgba(255,255,255,.6); margin-top: 1px;
}
#mte-marketplace .mte-listing-price-tag {
  text-align: right;
}
#mte-marketplace .mte-listing-price-val {
  display: block; font-size: 17px; font-weight: 800; color: var(--mkt-gold);
}
#mte-marketplace .mte-listing-price-unit {
  display: block; font-size: 11px; color: rgba(255,255,255,.5); margin-top: 1px;
}

#mte-marketplace .mte-listing-body {
  padding: 14px 18px 12px;
  display: flex; flex-direction: column; gap: 8px; flex: 1;
}
#mte-marketplace .mte-listing-stat {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
#mte-marketplace .mte-stat-label {
  font-size: 11px; color: var(--mte-text3);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
#mte-marketplace .mte-listing-stat-val {
  font-size: 13px; font-weight: 600; color: var(--mte-text);
}
#mte-marketplace .mte-listing-divider {
  height: 1px; background: var(--mte-border); margin: 4px 0;
}

#mte-marketplace .mte-listing-footer {
  padding: 10px 18px 16px;
}
#mte-marketplace .mte-listing-footer .mte-btn {
  width: 100%; border-radius: 10px; font-size: 14px;
}

/* Dark mode listing top */
body.dark-mode #mte-marketplace .mte-listing-top,
html[data-theme="dark"] #mte-marketplace .mte-listing-top {
  background: linear-gradient(135deg, #020617 0%, #0f172a 100%);
}

/* Marketplace dark mode tokens */
body.dark-mode #mte-marketplace .mte-mkt-filters,
html[data-theme="dark"] #mte-marketplace .mte-mkt-filters {
  background: var(--mte-card); border-color: var(--mte-border);
}


/* ── Transaction History — Premium Redesign ──────────────────────────────── */
#mte-transactions .mte-txn-hero {
  background: linear-gradient(135deg, #0f1a2e 0%, #1a2744 55%, #1d4ed8 100%);
  border-radius: 20px;
  padding: 24px 20px 26px;
  margin-bottom: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
}
#mte-transactions .mte-txn-hero::before {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 150px; height: 150px; border-radius: 50%;
  background: rgba(212,175,55,.12); pointer-events: none;
}
#mte-transactions .mte-txn-hero h2 {
  font-size: 1.4rem; font-weight: 900; margin: 0; position: relative; z-index: 1;
}

#mte-transactions .mte-txn-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  background: var(--mte-card);
  border: 1px solid var(--mte-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 16px;
  box-shadow: var(--mte-shadow);
}
#mte-transactions .mte-txn-filters .mte-input {
  width: auto; flex: 1; min-width: 130px; border-radius: 10px; font-size: 13.5px;
}

/* Scrollable list container */
#mte-transactions #mte-txn-list {
  background: var(--mte-card);
  border: 1px solid var(--mte-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--mte-shadow);
}

/* Transaction rows */
.mte-txn-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mte-border);
  transition: background .15s;
}
.mte-txn-row:last-child { border-bottom: none; }
.mte-txn-row:hover { background: var(--mte-bg2); }

/* Icon pill */
.mte-txn-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
  background: var(--mte-bg2);
}
.mte-txn-dir-in  {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  box-shadow: 0 3px 10px rgba(5,150,105,.15);
}
.mte-txn-dir-out {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  box-shadow: 0 3px 10px rgba(220,38,38,.12);
}

/* Details */
.mte-txn-details { flex: 1; min-width: 0; }
.mte-txn-type {
  font-size: 13.5px; font-weight: 700; color: var(--mte-text);
}
.mte-txn-meta {
  font-size: 12px; color: var(--mte-text2); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mte-txn-date {
  font-size: 11px; color: var(--mte-text3); margin-top: 3px;
}

/* Amount pill */
.mte-txn-amount {
  font-size: 15px; font-weight: 800; white-space: nowrap;
  padding: 4px 10px; border-radius: 20px;
}
.mte-amount-in  {
  color: var(--mte-green);
  background: rgba(22,163,74,.10);
}
.mte-amount-out {
  color: var(--mte-red);
  background: rgba(220,38,38,.10);
}

.mte-txn-fee {
  font-size: 10.5px; color: var(--mte-text3);
  background: var(--mte-bg2);
  padding: 2px 7px; border-radius: 10px; margin-top: 4px;
  display: inline-block;
}

.mte-load-more-row { text-align: center; padding: 20px 0 0; }

/* Dark mode icon pills */
body.dark-mode .mte-txn-dir-in,
html[data-theme="dark"] .mte-txn-dir-in {
  background: linear-gradient(135deg, #052e16, #14532d);
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
body.dark-mode .mte-txn-dir-out,
html[data-theme="dark"] .mte-txn-dir-out {
  background: linear-gradient(135deg, #450a0a, #7f1d1d);
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}
body.dark-mode #mte-transactions #mte-txn-list,
html[data-theme="dark"] #mte-transactions #mte-txn-list {
  background: var(--mte-card); border-color: var(--mte-border);
}
body.dark-mode #mte-transactions .mte-txn-filters,
html[data-theme="dark"] #mte-transactions .mte-txn-filters {
  background: var(--mte-card); border-color: var(--mte-border);
}


/* ── Token grid ──────────────────────────────────────────────────────────── */
.mte-token-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 480px) { .mte-token-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 720px) { .mte-token-grid { grid-template-columns: repeat(3, 1fr); } }

.mte-token-tile {
  background: var(--mte-card);
  border: 1.5px solid var(--mte-border);
  border-radius: var(--mte-radius);
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color .2s;
}
.mte-token-tile:hover { border-color: var(--mte-primary); }
.mte-token-tile-header { display: flex; align-items: center; gap: 10px; }
.mte-tile-logo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.mte-tile-logo-placeholder {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--mte-primary), #f97316);
  color: #111; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mte-tile-desc { font-size: 13px; color: var(--mte-text2); margin: 0; flex: 1; }
.mte-tile-stats { display: flex; gap: 16px; }
.mte-tile-stats > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.mte-stat-label { font-size: 11px; color: var(--mte-text3); text-transform: uppercase; letter-spacing: .05em; }
.mte-tile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
.mte-modal { position: fixed; inset: 0; z-index: 99990; display: flex; align-items: flex-end; }
@media (min-width: 540px) { .mte-modal { align-items: center; justify-content: center; } }
.mte-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(3px); }
.mte-modal-box {
  position: relative;
  background: var(--mte-card);
  border-radius: var(--mte-radius) var(--mte-radius) 0 0;
  padding: 28px 24px 36px;
  width: 100%;
  max-width: 460px;
  box-shadow: var(--mte-shadow-lg);
  z-index: 1;
  animation: mte-slide-up .25s ease-out;
  max-height: 90vh;
  overflow-y: auto;
}
@media (min-width: 540px) {
  .mte-modal-box { border-radius: var(--mte-radius); }
}
@keyframes mte-slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.mte-modal-box h3 { font-size: 18px; font-weight: 700; margin: 0 0 20px; }
.mte-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: var(--mte-bg2);
  border: none; border-radius: 50%;
  width: 32px; height: 32px; cursor: pointer;
  font-size: 14px; color: var(--mte-text2);
  display: flex; align-items: center; justify-content: center;
}

/* ── Buy cost preview ────────────────────────────────────────────────────── */
.mte-buy-cost-preview {
  display: flex; justify-content: space-between;
  background: var(--mte-bg2); border-radius: var(--mte-radius-sm);
  padding: 12px 14px; font-size: 14px; margin-top: 12px;
  border: 1px solid var(--mte-border);
}
.mte-buy-cost-preview strong { font-size: 16px; color: var(--mte-primary); }

/* ── Success state ───────────────────────────────────────────────────────── */
.mte-success-state { text-align: center; padding: 32px 20px; }
.mte-success-icon  { font-size: 56px; margin-bottom: 12px; }
.mte-success-state h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.mte-success-state p { color: var(--mte-text2); margin-bottom: 24px; }

/* ══════════════════════════════════════════════════════════════════════
 * MTE v4.3.0 — P2P Marketplace Upgrade Styles
 * ══════════════════════════════════════════════════════════════════════ */

/* ── Listing card updates ───────────────────────────────────────────── */
.mte-listing-logo-initials {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  font-size: 14px; font-weight: 800; color: #fff;
}
.mte-listing-price-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: var(--mte-bg2);
  border-top: 1px solid var(--mte-border);
  border-bottom: 1px solid var(--mte-border);
}
.mte-listing-price-val {
  font-size: 15px; font-weight: 800; color: var(--mte-gold, #D4AF37);
}
.mte-listing-pay-method {
  font-size: 12px; color: var(--mte-text2); font-weight: 600;
}

/* ── Merchant badges ────────────────────────────────────────────────── */
.mte-merchant-badge {
  font-size: 10.5px; font-weight: 800; padding: 3px 8px;
  border-radius: 50px; letter-spacing: .4px;
  margin-left: auto;
}
.mte-badge-verified {
  background: linear-gradient(135deg, #059669, #047857);
  color: #fff;
}
.mte-badge-merchant {
  background: var(--mte-bg3, #e5e9f0);
  color: var(--mte-text2);
}

/* ── Vendor notice ──────────────────────────────────────────────────── */
.mte-vendor-notice {
  font-size: 12px; color: var(--mte-text2);
  align-self: center; padding: 0 8px;
}

/* ── Method filter badge ────────────────────────────────────────────── */
.mte-mkt-badge-manual {
  background: rgba(212,175,55,.15); color: var(--mte-gold, #D4AF37);
  border: 1px solid rgba(212,175,55,.3);
}

/* ── Price not set ──────────────────────────────────────────────────── */
.mte-price-not-set {
  font-size: 12px; color: #d97706; font-weight: 600; cursor: help;
}

/* ── Trade box (larger modal) ───────────────────────────────────────── */
.mte-trade-box {
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}

/* ── P2P trade panels ───────────────────────────────────────────────── */
#mte-trade-p2p-panel h3 {
  margin: 0 0 16px; font-size: 18px; font-weight: 800;
}

/* ── Timer bar ──────────────────────────────────────────────────────── */
.mte-p2p-timer-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, #1a2744 0%, #0f1a2e 100%);
  color: #fff; padding: 10px 16px; border-radius: var(--mte-radius-sm);
  margin-bottom: 16px;
}
.mte-p2p-timer-label { font-size: 13px; color: rgba(255,255,255,.72); }
.mte-p2p-countdown   { font-size: 20px; font-weight: 900; color: var(--mte-gold, #D4AF37); }

/* ── Bank info card ─────────────────────────────────────────────────── */
.mte-p2p-bank-info {
  background: var(--mte-bg2); border: 1.5px solid var(--mte-border);
  border-radius: var(--mte-radius-sm); padding: 14px 16px; margin-bottom: 16px;
}
.mte-p2p-bank-info h4 {
  margin: 0 0 12px; font-size: 14px; font-weight: 800;
  color: var(--mte-primary, #1a2744);
}
.mte-bank-detail-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--mte-border);
  flex-wrap: wrap;
}
.mte-bank-detail-row:last-child { border-bottom: none; }
.mte-bank-label {
  font-size: 11.5px; font-weight: 700; color: var(--mte-text2);
  text-transform: uppercase; letter-spacing: .4px; min-width: 110px;
}
.mte-bank-value { font-size: 14px; font-weight: 600; flex: 1; }
.mte-copyable   { font-family: monospace; letter-spacing: .5px; }
.mte-copy-btn {
  background: none; border: none; cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 4px;
  transition: background .15s;
}
.mte-copy-btn:hover { background: var(--mte-bg3); }

/* ── P2P Fiat preview (buy panel) ───────────────────────────────────── */
.mte-p2p-fiat-preview {
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.25);
  border-radius: var(--mte-radius-sm); padding: 10px 14px; margin-bottom: 12px;
}
.mte-p2p-fiat-label { font-size: 13px; color: var(--mte-text2); }
.mte-p2p-fiat-amount { font-size: 18px; font-weight: 800; color: var(--mte-gold, #D4AF37); }

/* ── P2P status messages ────────────────────────────────────────────── */
.mte-p2p-status-msg {
  display: flex; align-items: flex-start; gap: 14px;
  border-radius: var(--mte-radius-sm); padding: 16px;
  margin-bottom: 16px;
}
.mte-p2p-status-icon { font-size: 28px; flex-shrink: 0; }
.mte-p2p-waiting  { background: rgba(245,158,11,.08); border: 1px solid rgba(245,158,11,.25); }
.mte-p2p-action   { background: rgba(47,91,255,.07);  border: 1px solid rgba(47,91,255,.2);  }
.mte-p2p-done     { background: rgba(5,150,105,.08);  border: 1px solid rgba(5,150,105,.25); }
.mte-p2p-cancelled{ background: rgba(220,38,38,.07);  border: 1px solid rgba(220,38,38,.2);  }
.mte-p2p-appeal   { background: rgba(245,158,11,.1);  border: 1px solid rgba(245,158,11,.35);}
.mte-p2p-status-msg strong { display: block; font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.mte-p2p-status-msg p      { margin: 0; font-size: 13px; color: var(--mte-text2); }

/* ── Trade chat ─────────────────────────────────────────────────────── */
.mte-p2p-chat { margin: 16px 0 12px; }
.mte-p2p-chat h4 {
  margin: 0 0 8px; font-size: 13.5px; font-weight: 800;
  color: var(--mte-text2);
}
.mte-p2p-messages {
  height: 160px; overflow-y: auto; background: var(--mte-bg2);
  border: 1px solid var(--mte-border); border-radius: var(--mte-radius-sm);
  padding: 10px; display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 8px;
}
.mte-chat-msg {
  max-width: 85%; border-radius: 10px; padding: 7px 11px;
  font-size: 13px; line-height: 1.4;
}
.mte-chat-mine   { align-self: flex-end; background: var(--mte-primary, #1a2744); color: #fff; margin-left: auto; }
.mte-chat-theirs { align-self: flex-start; background: var(--mte-bg3, #e5e9f0); color: var(--mte-text1); }
.mte-chat-sender { display: block; font-size: 10px; font-weight: 700; opacity: .65; margin-bottom: 2px; }
.mte-chat-text   { display: block; word-break: break-word; }
.mte-chat-attach { display: block; font-size: 11px; margin-top: 4px; color: var(--mte-gold); }
.mte-chat-time   { display: block; font-size: 10px; opacity: .5; text-align: right; margin-top: 3px; }
.mte-p2p-chat-input {
  display: flex; gap: 8px; align-items: center;
}
.mte-p2p-chat-input .mte-input { flex: 1; height: 38px; }
.mte-p2p-chat-input .mte-btn   { height: 38px; white-space: nowrap; flex-shrink: 0; }

/* ── Proof upload ───────────────────────────────────────────────────── */
.mte-p2p-proof-upload {
  margin: 12px 0;
}
.mte-p2p-proof-upload label {
  display: block; font-size: 12.5px; font-weight: 700;
  color: var(--mte-text2); margin-bottom: 6px;
}
.mte-p2p-proof-upload input[type="file"] {
  font-size: 13px; width: 100%;
}

/* ── New listing modal — bank transfer fields ───────────────────────── */
#mte-nl-bank-fields {
  border: 1.5px solid var(--mte-border);
  border-radius: var(--mte-radius-sm);
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--mte-bg2);
}
.mte-nl-fiat-preview {
  background: rgba(212,175,55,.08); border: 1px solid rgba(212,175,55,.25);
  border-radius: var(--mte-radius-sm); padding: 10px 14px; margin-bottom: 12px;
}
.mte-nl-fiat-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; padding: 2px 0;
}
.mte-nl-fiat-label  { color: var(--mte-text2); }
.mte-nl-fiat-row strong { font-size: 15px; font-weight: 800; color: var(--mte-gold, #D4AF37); }
.mte-required { color: #dc2626; font-size: 12px; }

/* ── Success green button ───────────────────────────────────────────── */
.mte-btn-success {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  color: #fff; border: none;
}
.mte-btn-success:hover { background: linear-gradient(135deg, #047857 0%, #065f46 100%); }

/* ── Required asterisk ──────────────────────────────────────────────── */
.mte-required { color: #dc2626; }

/* ══════════════════════════════════════════════════════════════════════
 * MTE v4.3.1 — My Orders Bottom Sheet + Bug-fix Styles
 * ══════════════════════════════════════════════════════════════════════ */

/* ── My Orders button on hero ──────────────────────────────────────── */
.mte-my-orders-btn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
}
.mte-my-orders-btn:hover { background: rgba(255,255,255,.22); }

/* ── Bottom sheet ──────────────────────────────────────────────────── */
.mte-bottom-sheet {
  position: fixed; inset: 0; z-index: 99990;
  display: flex; align-items: flex-end; justify-content: center;
}
.mte-bottom-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.55); backdrop-filter: blur(2px);
}
.mte-bottom-sheet-box {
  position: relative; z-index: 1;
  background: var(--mte-bg, #fff);
  border-radius: 20px 20px 0 0;
  width: 100%; max-width: 640px;
  max-height: 88vh; overflow: hidden;
  display: flex; flex-direction: column;
  animation: mteSheetUp .22s ease;
}
@keyframes mteSheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.mte-bottom-sheet-handle {
  width: 40px; height: 4px; border-radius: 4px;
  background: var(--mte-border, #e2e8f0);
  margin: 10px auto 0;
  flex-shrink: 0;
}
.mte-bottom-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px 10px; font-size: 16px; font-weight: 800;
  border-bottom: 1px solid var(--mte-border, #e2e8f0);
  flex-shrink: 0;
}
.mte-bottom-sheet-close {
  background: none; border: none; cursor: pointer;
  font-size: 16px; color: var(--mte-text2); padding: 4px 6px;
}

/* ── Tab bar ───────────────────────────────────────────────────────── */
.mte-orders-tab-bar {
  display: flex; gap: 6px;
  padding: 10px 14px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  flex-shrink: 0;
  border-bottom: 1px solid var(--mte-border, #e2e8f0);
}
.mte-orders-tab-bar::-webkit-scrollbar { display: none; }
.mte-orders-tab {
  white-space: nowrap; padding: 6px 14px; border-radius: 20px;
  font-size: 12.5px; font-weight: 700; cursor: pointer; border: none;
  background: var(--mte-bg2, #f1f5f9); color: var(--mte-text2);
  transition: all .15s;
}
.mte-orders-tab-active,
.mte-orders-tab:hover {
  background: var(--mte-primary, #1a2744); color: #fff;
}

/* ── Orders list ───────────────────────────────────────────────────── */
.mte-orders-list-wrap {
  flex: 1; overflow-y: auto; padding: 10px 14px 20px;
}
.mte-orders-loading { text-align: center; padding: 24px; color: var(--mte-text2); font-size: 14px; }
.mte-order-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--mte-border, #e2e8f0);
  gap: 10px;
}
.mte-order-row:last-child { border-bottom: none; }
.mte-order-row-left  { display: flex; align-items: flex-start; gap: 10px; flex: 1; min-width: 0; }
.mte-order-emoji     { font-size: 22px; flex-shrink: 0; }
.mte-order-info      { display: flex; flex-direction: column; gap: 2px; font-size: 13px; min-width: 0; }
.mte-order-info strong { font-size: 14px; font-weight: 800; }
.mte-order-info span   { color: var(--mte-text2); }
.mte-order-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.mte-order-status {
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
  text-transform: capitalize; white-space: nowrap;
}
.mte-status-open              { background: rgba(37,99,235,.12);  color: #2563eb; }
.mte-status-awaiting_payment  { background: rgba(245,158,11,.12); color: #d97706; }
.mte-status-payment_sent      { background: rgba(139,92,246,.12); color: #7c3aed; }
.mte-status-payment_confirmed { background: rgba(5,150,105,.12);  color: #059669; }
.mte-status-released          { background: rgba(5,150,105,.15);  color: #047857; }
.mte-status-cancelled         { background: rgba(220,38,38,.1);   color: #dc2626; }
.mte-status-expired           { background: rgba(107,114,128,.12);color: #6b7280; }
.mte-status-appealed          { background: rgba(245,158,11,.18); color: #b45309; }
.mte-order-date { font-size: 11px; color: var(--mte-text2); }

/* ── Transaction row logo ──────────────────────────────────────────── */
.mte-txn-icon-wrap { flex-shrink: 0; }
.mte-txn-logo { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.mte-txn-fee  { font-size: 11.5px; color: var(--mte-text2); margin-top: 2px; }