.tk-wrap { max-width: 980px; margin: 0 auto; padding: 12px 16px; }
.tk-title { text-align:center; margin: 8px 0 18px; }

.tk-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tk-topbar { justify-content: center; margin-bottom: 8px; }

.pill { background:#0f172a; color:#e2e8f0; border-radius:16px; padding:6px 10px; font-size:12px; }
.pill--net { background:#111827; }
.pill--addr { background:#0b1220; }

.btn { background:#2d3748; color:#fff; border:none; border-radius:8px; padding:8px 12px; cursor:pointer; }
.btn--blue{ background:#1e40af; }
.btn--red { background:#b91c1c; }
.btn--dark{ background:#111827; }

.tk-tabs { justify-content:center; margin: 8px 0 10px; }
.tab { background:#0f172a; color:#fff; border-radius:10px; padding:8px 12px; cursor:pointer; border:none; }
.tab.active { background:#1e293b; }

.tk-banner { background:#111827; color:#fff; padding:12px; border-radius:12px; margin:12px 0; }
.hidden { display:none !important; }
.muted { color:#94a3b8 !important; font-size:24px !important; font-weight: bold !important; }

/* More specific selectors to override theme CSS */
#tkcmps-swap-root .muted,
.tk-wrap .muted,
.card .muted { 
    color:#94a3b8 !important; 
    font-size:24px !important; 
    font-weight: bold !important; 
}

/* Target specific elements by ID for maximum specificity */
#buy-usd,
#sell-est,
#div-bnb,
#div-usd,
#compass-info,
#w-info,
#wc-dep-prev,
#wc-red-prev {
    color:#94a3b8 !important; 
    font-size:24px !important; 
    font-weight: bold !important;
}

.card { background:#0b1220; color:#fff; border-radius:16px; padding:16px; margin:12px 0; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.card h2, .card h3 { color:#fff; margin: 0 0 10px; }

input[type="number"],
input[type="text"] { width:100%; padding:10px 12px; border-radius:8px; border:1px solid #1f2937; background:#0f172a; color:#fff; }

.row { display:flex; align-items:center; gap:10px; margin-top:10px; }

/* wCOMPASS cards: always stacked one above the other */
.wc-grid {
  display: grid;
  grid-template-columns: 1fr;   /* single column on all screen sizes */
  gap: 12px;
}

/* remove or override any previous media rule that set 2 columns */
@media (min-width: 820px) {
  .wc-grid { grid-template-columns: 1fr !important; }
}

.wc-grid .card { margin-bottom: 8px; }


.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:24px; background:#1f2937; color:#fff; padding:10px 16px; border-radius:10px; z-index:9999; }