/* =====================================================================
   TLS THEME — full light "Tradeline Supply"-style visual clone.
   Loaded AFTER enhance.css; every rule is scoped with `html body` so it
   overrides the previous dark-navy overrides deterministically.
   ===================================================================== */

:root {
  --tls-navy: #263644;
  --tls-navy-dark: #1d2b37;
  --tls-slate: #4d6579;
  --tls-slate-dark: #3b5265;
  --tls-yellow: #f3e600;
  --tls-yellow-dark: #d9cd00;
  --tls-text: #4a4a4a;
  --tls-head: #2b3d4f;
  --tls-line: #e2e6ea;
  --tls-soft: #f5f7f8;
}

/* ------------------------- BASE ------------------------- */
html body {
  background: #ffffff !important;
  color: var(--tls-text) !important;
  font-family: 'Open Sans', 'Inter', Arial, sans-serif !important;
}
html body h1, html body h2, html body h3, html body h4, html body h5 {
  font-family: 'Open Sans', 'Inter', Arial, sans-serif !important;
  color: var(--tls-head) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
}
html body h1, html body h2 { text-transform: uppercase; }
html body em { font-style: normal; }
html body p, html body li, html body span, html body td, html body th, html body label, html body small {
  color: inherit;
}

/* ------------------------- HEADER / NAV ------------------------- */
html body header {
  background: var(--tls-navy) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18) !important;
}
html body nav { max-width: 1280px !important; height: 84px !important; }
html body .logo { color: #fff !important; font-family: 'Open Sans', sans-serif !important; font-weight: 800 !important; text-transform: uppercase; letter-spacing: 0.02em; }
html body .logo span { color: var(--tls-yellow) !important; }
html body .logo-icon { background: var(--tls-yellow) !important; }
html body .logo-icon svg path,
html body .logo-icon svg circle { stroke: var(--tls-navy) !important; fill: none !important; }

html body .nav-links a {
  color: #ffffff !important;
  text-transform: uppercase;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.09em !important;
  padding: 10px 12px !important;
  position: relative;
}
html body .nav-links a:hover { color: var(--tls-yellow) !important; }
html body .nav-links a.active { color: #fff !important; }
html body .nav-links a.active::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -6px;
  height: 4px; background: var(--tls-yellow);
}
html body .nav-links li:last-child a,
html body .nav-links a[href="account.html"] { color: var(--tls-yellow) !important; }

html body .dropdown {
  background: #ffffff !important;
  border: 1px solid var(--tls-line) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14) !important;
}
html body .dropdown a { color: var(--tls-head) !important; text-transform: none; letter-spacing: 0 !important; font-weight: 500 !important; }
html body .dropdown a:hover { background: var(--tls-soft) !important; color: var(--tls-slate) !important; }

html body .cart-btn { color: #fff !important; }
html body .cart-count { background: var(--tls-yellow) !important; color: var(--tls-navy) !important; font-weight: 800 !important; }
html body .nav-cta {
  background: var(--tls-yellow) !important;
  color: var(--tls-navy) !important;
  border: none !important;
  text-transform: uppercase;
  font-weight: 800 !important;
  letter-spacing: 0.06em;
  border-radius: 2px !important;
}
html body .nav-cta:hover { background: var(--tls-yellow-dark) !important; }
html body .hamburger span { background: #fff !important; }
html body .mobile-nav { background: var(--tls-navy) !important; }
html body .mobile-nav a { color: #fff !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; text-transform: uppercase; font-size: 13px; letter-spacing: 0.07em; }

/* ------------------------- HERO ------------------------- */
html body .hero {
  background: url("hero-cards.jpg") 78% center / cover no-repeat !important;
  min-height: 620px !important;
  padding: 0 !important;
  display: flex; align-items: center;
}
html body .hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.18));
}
html body .hero-grid-bg,
html body .hero-glow,
html body .hero-glow2,
html body .hero-visual { display: none !important; }

html body .hero-inner {
  display: block !important;
  text-align: center;
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto; padding: 90px 24px !important;
}
html body .hero-tag {
  background: rgba(0,0,0,0.28) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  color: #fff !important;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11.5px !important;
}
html body .hero-sub-tag { color: #fff !important; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
html body .hero-inner h1 {
  color: #ffffff !important;
  font-size: clamp(38px, 7vw, 82px) !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  line-height: 1.02 !important;
  text-shadow: 0 3px 18px rgba(0,0,0,0.35);
  margin-bottom: 22px !important;
}
html body .hero-inner h1 em { color: #fff !important; font-style: normal; }
html body .hero-inner > .hero-content > p {
  color: #fff !important;
  max-width: 720px; margin: 0 auto 26px !important;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
  font-size: 16.5px !important;
}
html body .hero-btns { justify-content: center !important; }
html body .hero-stats { justify-content: center !important; border-top-color: rgba(255,255,255,0.4) !important; }
html body .hero-stat-num { color: var(--tls-yellow) !important; }
html body .hero-stat-label { color: #fff !important; }

/* ------------------------- BUTTONS ------------------------- */
html body .btn-primary,
html body .hero-btns .btn-primary,
html body .success-btn,
html body .add-cart-btn,
html body .checkout-btn,
html body .auth-submit,
html body .submit-btn,
html body .place-order-btn,
html body button.primary {
  background: var(--tls-slate) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 2px !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  box-shadow: none !important;
}
html body .btn-primary:hover,
html body .success-btn:hover,
html body .checkout-btn:hover,
html body .auth-submit:hover { background: var(--tls-slate-dark) !important; }
html body .btn-ghost {
  background: rgba(255,255,255,0.16) !important;
  color: #fff !important;
  border: 2px solid #fff !important;
  border-radius: 2px !important;
  text-transform: uppercase; font-weight: 700 !important; letter-spacing: 0.05em;
}
html body .btn-ghost:hover { background: #fff !important; color: var(--tls-navy) !important; }

/* ------------------------- SECTIONS ------------------------- */
html body section,
html body .section,
html body .why-section,
html body .how-section,
html body .article-section,
html body .value-section { background: #ffffff !important; }
html body .section:nth-of-type(even),
html body .how-section,
html body .article-section { background: var(--tls-soft) !important; }
html body .section-tag { color: var(--tls-slate) !important; background: rgba(77,101,121,0.10) !important; border-color: rgba(77,101,121,0.2) !important; text-transform: uppercase; letter-spacing: 0.12em; }
html body .section-title { color: var(--tls-head) !important; }
html body .section-sub { color: var(--tls-text) !important; }

/* Trust bar */
html body .trust-bar { background: var(--tls-navy) !important; border: none !important; }
html body .trust-bar *, html body .trust-badge, html body .trust-stat, html body .trust-stat-label { color: #fff !important; }
html body .trust-stat-num, html body .trust-panel-title { color: var(--tls-yellow) !important; }

/* Cards — all light */
html body .tradeline-card,
html body .value-card,
html body .step-card,
html body .opp-card,
html body .article-card,
html body .why-item,
html body .impact-grid > *,
html body .tier-card,
html body .req-card,
html body .faq-item,
html body .signup-card,
html body .sell-form-card,
html body .earn-calculator,
html body .earnings-table,
html body .cart-item,
html body .summary-card,
html body .step-section,
html body .auth-card,
html body .dash-panel,
html body .dash-sidebar,
html body .stat-card,
html body .order-success,
html body .success-details,
html body .filter-card,
html body .listing-table-wrap,
html body .profile-field,
html body .orders-table,
html body .dash-panel > div[style*="background:var(--white)"],
html body .dash-panel > div[style*="background: var(--white)"],
html body .dash-panel > div[style*="background:#fff"],
html body .dash-panel > div[style*="background: #fff"] {
  background: #ffffff !important;
  border: 1px solid var(--tls-line) !important;
  border-radius: 4px !important;
  box-shadow: 0 2px 10px rgba(43, 61, 79, 0.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--tls-text) !important;
}
html body .value-card *,
html body .step-card *,
html body .opp-card *,
html body .article-card *,
html body .why-item *,
html body .tier-card *,
html body .req-card *,
html body .faq-item *,
html body .signup-card *,
html body .sell-form-card *,
html body .earn-calculator *,
html body .cart-item *,
html body .summary-card *,
html body .step-section *,
html body .auth-card *,
html body .dash-panel *,
html body .dash-sidebar *,
html body .stat-card *,
html body .order-success *,
html body .success-details *,
html body .profile-field *,
html body .orders-table * {
  text-shadow: none !important;
}

/* Card / panel headings and text back to dark ink */
html body .step-section-title,
html body .summary-title,
html body .success-title,
html body .cart-item-title,
html body .crypto-amount-val,
html body .summary-total-value,
html body .summary-total-label,
html body .dash-panel-title,
html body .stat-num,
html body .auth-logo-text,
html body .au-item-header,
html body .wallet-address-label,
html body .crypto-tab-name,
html body .crypto-tab-ticker,
html body .tx-hash-label,
html body .form-label,
html body .dash-user-name,
html body .value-title,
html body .step-title,
html body .opp-title,
html body .article-title,
html body .why-item-title,
html body .card-bank-name { color: var(--tls-head) !important; }

html body .cart-item-meta, html body .cart-item-meta *,
html body .crypto-amount-usd,
html body .crypto-amount-label,
html body .summary-line-label,
html body .summary-line-value,
html body .dash-panel-sub,
html body .dash-user-email,
html body .stat-label,
html body .tx-hash-hint,
html body .security-note,
html body .guarantee-item,
html body .form-note,
html body .profile-field-label,
html body .profile-field-value,
html body .auth-note,
html body .auth-divider,
html body .cart-item-au,
html body .empty-cart p,
html body .success-sub,
html body .success-row span,
html body .orders-table td,
html body .orders-table th,
html body .dash-nav-item,
html body .value-desc,
html body .step-desc,
html body .opp-desc,
html body .article-desc,
html body .why-item-desc,
html body .article-meta { color: var(--tls-text) !important; }

html body .card-price, html body .price, html body .tier-price { color: var(--tls-slate) !important; font-weight: 800 !important; }
html body .card-badge { background: var(--tls-yellow) !important; color: var(--tls-navy) !important; font-weight: 800 !important; }
html body .card-meta, html body .card-meta * { color: #6b7784 !important; }

/* ------------------------- FORMS / TABLES ------------------------- */
html body input, html body select, html body textarea {
  background: #ffffff !important;
  color: #1f2a33 !important;
  border: 1px solid #cfd6dc !important;
  border-radius: 2px !important;
}
html body input::placeholder, html body textarea::placeholder { color: #8b959d !important; }
html body input:focus, html body select:focus, html body textarea:focus { border-color: var(--tls-slate) !important; outline: none !important; }

html body table { background: #fff !important; }
html body thead th, html body .listing-table thead th, html body .orders-table th, html body .earnings-table th {
  background: var(--tls-navy) !important; color: #fff !important;
  text-transform: uppercase; font-size: 12px; letter-spacing: 0.06em;
}
html body tbody tr { border-bottom: 1px solid var(--tls-line) !important; }
html body tbody tr:nth-child(even) { background: var(--tls-soft) !important; }
html body tbody td { color: #3c4a55 !important; }

/* Crypto tabs (light) */
html body .crypto-tab { background: #fff !important; border: 1px solid var(--tls-line) !important; color: var(--tls-text) !important; }
html body .crypto-tab:hover { background: var(--tls-soft) !important; border-color: var(--tls-slate) !important; color: var(--tls-head) !important; }
html body .crypto-tab.active,
html body .crypto-tab.active.btc,
html body .crypto-tab.active.usdt,
html body .crypto-tab.active.ltc {
  background: var(--tls-navy) !important; border-color: var(--tls-navy) !important; color: #fff !important;
}
html body .crypto-tab.active * { color: #fff !important; }
html body .net-btn { background: #fff !important; color: var(--tls-text) !important; border: 1px solid var(--tls-line) !important; }
html body .net-btn.active { background: var(--tls-slate) !important; border-color: var(--tls-slate) !important; color: #fff !important; }
html body .wallet-address { background: var(--tls-soft) !important; color: #1f2a33 !important; border: 1px solid var(--tls-line) !important; }
html body .copy-btn { color: var(--tls-slate) !important; }
html body .crypto-note { background: #fffbe6 !important; border: 1px solid #f0dd7a !important; color: #6b5b13 !important; }
html body .crypto-note strong { color: #4a3f05 !important; }
html body .tx-hash-input { border: 1px solid #cfd6dc !important; }

/* Auth + dashboard */
html body .auth-tabs { background: var(--tls-soft) !important; }
html body .auth-tab { color: var(--tls-text) !important; }
html body .auth-tab.active { background: var(--tls-navy) !important; color: #fff !important; }
html body .forgot-link { color: var(--tls-slate) !important; }
html body .dash-nav-item:hover { background: var(--tls-soft) !important; color: var(--tls-head) !important; }
html body .dash-nav-item.active { background: var(--tls-navy) !important; color: #fff !important; }
html body .edit-btn, html body .logout-btn { background: #fff !important; color: var(--tls-slate) !important; border: 1px solid var(--tls-line) !important; }
html body .edit-btn:hover, html body .logout-btn:hover { border-color: var(--tls-slate) !important; color: var(--tls-navy) !important; }

/* Generic inline-styled panels from earlier dark overrides */
html body .dash-panel [style*="uppercase"] { color: #7a8792 !important; }
html body .dash-panel div[style*="text-align:center"],
html body .dash-panel div[style*="text-align: center"] { color: var(--tls-text) !important; }
html body .dash-panel div[style*="background:var(--sky-pale)"],
html body .dash-panel div[style*="background: var(--sky-pale)"],
html body .dash-panel div[style*="background:var(--surface)"],
html body .dash-panel div[style*="background: var(--surface)"] {
  background: var(--tls-soft) !important; border-color: var(--tls-line) !important;
}
html body .dash-panel div[style*="background:var(--sky-pale)"] *,
html body .dash-panel div[style*="background: var(--sky-pale)"] *,
html body .dash-panel div[style*="background:var(--surface)"] *,
html body .dash-panel div[style*="background: var(--surface)"] * { color: var(--tls-text) !important; }

/* ------------------------- FOOTER ------------------------- */
html body footer, html body .footer-top, html body .footer-bottom {
  background: var(--tls-navy) !important;
  color: rgba(255,255,255,0.82) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html body footer a { color: rgba(255,255,255,0.82) !important; }
html body footer a:hover { color: var(--tls-yellow) !important; }
html body .footer-col h4, html body .footer-brand { color: #fff !important; }

/* ------------------------- SUPPORT WIDGET (phone card) ------------------------- */
html body .support-widget .support-btn { background: var(--tls-slate) !important; color: #fff !important; }
html body .support-tooltip { background: #fff !important; color: var(--tls-head) !important; border: 1px solid var(--tls-line) !important; }

.tls-phone-card {
  position: fixed; right: 18px; bottom: 18px; z-index: 900;
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--tls-line);
  box-shadow: 0 10px 26px rgba(43, 61, 79, 0.18);
  padding: 10px 16px; border-radius: 4px;
}
.tls-phone-card .tls-phone-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--tls-slate); color: #fff;
  display: grid; place-items: center; font-size: 16px;
}
.tls-phone-card .tls-phone-num { font-size: 19px; font-weight: 800; color: var(--tls-slate); line-height: 1.1; }
.tls-phone-card .tls-phone-hours { font-size: 10.5px; color: #6b7784; font-style: italic; }
@media (max-width: 700px) {
  .tls-phone-card { right: 10px; bottom: 10px; padding: 8px 12px; }
  .tls-phone-card .tls-phone-num { font-size: 16px; }
  .tls-phone-card .tls-phone-hours { display: none; }
}

/* ------------------------- MOBILE ------------------------- */
@media (max-width: 900px) {
  html body nav { height: 68px !important; }
  html body .hero { min-height: 460px !important; }
  html body .hero-inner { padding: 60px 18px !important; }
  html body .hero-btns { flex-direction: column; align-items: stretch; }
  html body .hero-btns a { text-align: center; }
}

/* ============ NEUTRALIZE legacy dark wildcard rules ============ */
html body section, html body .section, html body main,
html body .card, html body [class*="card"],
html body [class*="panel"], html body [class*="box"],
html body .filter-box, html body .tradeline-table, html body .modal,
html body .lead-banner, html body .pricing-card, html body .feature-card,
html body .testimonial-card, html body .calc-inputs, html body .calc-results,
html body [class*="section"], html body [class*="header"], html body [class*="inner"],
html body [class*="grid"], html body [class*="wrap"], html body [class*="row"] {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body section, html body main,
html body [class*="section"], html body [class*="inner"],
html body [class*="grid"], html body [class*="wrap"], html body [class*="row"],
html body [class*="header"]:not(header):not(.dash-panel-header) {
  background: transparent !important;
  border: none !important;
  color: var(--tls-text) !important;
}
html body .section-header, html body .section-inner { box-shadow: none !important; }
html body .how-section, html body .article-section, html body .why-section { background: var(--tls-soft) !important; }
html body .trust-bar, html body [class*="trust-bar"] { background: var(--tls-navy) !important; }

html body .card, html body [class*="card"], html body [class*="panel"], html body [class*="box"] {
  background: #ffffff !important;
  border: 1px solid var(--tls-line) !important;
  border-radius: 4px !important;
  color: var(--tls-text) !important;
}
html body .card-badge { background: var(--tls-yellow) !important; border: none !important; }
html body .crypto-note, html body [class*="note"] { background: #fffbe6 !important; }

/* Kill legacy white-text + text-shadow rules */
html body strong, html body .bank-name, html body .price-cell, html body .limit-cell,
html body [class*="headline"], html body [class*="price"], html body [class*="amount"],
html body [class*="title"], html body [class*="num"] {
  color: var(--tls-head) !important;
  text-shadow: none !important;
}
html body .hero strong, html body .hero [class*="title"], html body .hero h1,
html body .hero-stat-num, html body .hero-stat-label, html body .hero-tag, html body .hero-sub-tag,
html body .trust-bar strong, html body .trust-bar [class*="num"], html body .trust-bar [class*="title"],
html body header strong, html body header [class*="title"], html body footer strong,
html body footer [class*="title"], html body footer [class*="num"] { text-shadow: none !important; }
html body .hero h1, html body .hero-sub-tag, html body .hero-tag { color: #fff !important; }
html body .hero-stat-num { color: var(--tls-yellow) !important; }
html body .trust-bar [class*="num"], html body .trust-bar [class*="title"] { color: var(--tls-yellow) !important; }
html body footer [class*="title"], html body footer strong { color: #fff !important; }

/* Links */
html body a { color: var(--tls-slate) !important; }
html body a:hover { color: var(--tls-navy) !important; }
html body header a, html body footer a, html body .hero a, html body .trust-bar a { color: inherit !important; }
html body .nav-links a { color: #fff !important; }
html body .nav-links a:hover { color: var(--tls-yellow) !important; }
html body .nav-cta { color: var(--tls-navy) !important; }
html body .btn-primary, html body .success-btn, html body .checkout-btn { color: #fff !important; }
html body .btn-ghost { color: #fff !important; }
html body .card-badge { color: var(--tls-navy) !important; }

/* Nav density so all items fit */
html body .nav-links { gap: 0 !important; }
html body .nav-links a { padding: 10px 9px !important; font-size: 11.5px !important; letter-spacing: 0.06em !important; }
html body .nav-cta { padding: 10px 14px !important; font-size: 11.5px !important; }
@media (max-width: 1180px) {
  html body .nav-cta { display: none !important; }
}
html body { overflow-x: hidden; }

/* "Why clients use us" band — light surface, dark text (matches the rest
   of the light theme; the old navy-band rules left white-on-white text). */
html body .why-section { background: var(--tls-soft) !important; }
html body .why-section .section-title,
html body .why-section h2,
html body .why-section [class*="title"],
html body .why-section strong { color: var(--tls-head) !important; }
html body .why-section .section-sub,
html body .why-section p,
html body .why-section [class*="desc"] { color: #4a5560 !important; }
html body .why-section .section-tag { color: var(--tls-navy) !important; background: rgba(38,54,68,0.08) !important; border-color: rgba(38,54,68,0.18) !important; }
html body .why-item { background: #fff !important; border: 1px solid var(--tls-line) !important; }
html body .why-item *, html body .why-item [class*="title"] { color: var(--tls-head) !important; }
html body .why-item-desc { color: #4a5560 !important; }


/* Remove legacy ambient photo backgrounds — the clone is a clean white site */
html body::before, html body::after { display: none !important; content: none !important; }
html body { background-image: none !important; }

/* Inner page hero bands */
html body .page-hero, html body .page-header, html body [class*="page-hero"] {
  background: var(--tls-navy) !important;
  color: #fff !important;
  padding: 56px 24px !important;
}
html body .page-hero *, html body [class*="page-hero"] * { color: #fff !important; }
html body .page-hero a, html body [class*="page-hero"] a { color: var(--tls-yellow) !important; }

/* Tables / listings on light */
html body .listing-table, html body .tradeline-table { background: #fff !important; }
html body .tradeline-table tbody tr, html body .listing-table tbody tr { background: #fff !important; }
html body .tradeline-table tbody tr:nth-child(even),
html body .listing-table tbody tr:nth-child(even) { background: var(--tls-soft) !important; }
html body .tradeline-table tbody tr:hover, html body .listing-table tbody tr:hover { background: #eef2f4 !important; }
html body .tradeline-table td, html body .listing-table td, html body .tradeline-table td * { color: #3c4a55 !important; }
html body .tradeline-table td [class*="price"], html body .listing-table td [class*="price"] { color: var(--tls-slate) !important; }

/* Notify / alert strip */
html body [class*="notify"], html body [class*="alert-strip"] { background: var(--tls-soft) !important; border: 1px solid var(--tls-line) !important; }
html body [class*="notify"] * { color: var(--tls-head) !important; }

/* Topbar */
html body .topbar { background: var(--tls-navy) !important; color: #fff !important; border: none !important; }
html body .topbar a { color: var(--tls-yellow) !important; }

/* Listing table header + controls */
html body .tradeline-table thead tr, html body .listing-table thead tr { background: var(--tls-navy) !important; }
html body .tradeline-table thead th, html body .listing-table thead th,
html body .tradeline-table thead th *, html body .listing-table thead th * {
  background: transparent !important; color: #ffffff !important; text-shadow: none !important;
}
html body .table-responsive { background: #fff !important; border: 1px solid var(--tls-line) !important; border-radius: 4px !important; overflow: hidden; }
html body .sort-select, html body select { color: #1f2a33 !important; }
html body .results-count, html body .table-controls, html body .table-controls * { color: var(--tls-text) !important; }
html body .add-cart-btn, html body [class*="add-cart"], html body button[onclick*="addToCart"] {
  background: var(--tls-slate) !important; color: #fff !important; border: none !important;
  border-radius: 2px !important; text-transform: uppercase; font-weight: 700 !important; letter-spacing: 0.04em;
}
html body .add-cart-btn:hover, html body [class*="add-cart"]:hover { background: var(--tls-slate-dark) !important; }
html body .filter-toggle, html body [class*="filter-btn"], html body [class*="show-filters"] {
  background: var(--tls-navy) !important; color: #fff !important; border: none !important; border-radius: 2px !important;
}
html body .notify-strip, html body [class*="notify"] { background: #fffbe6 !important; }

/* Cart / checkout containers */
html body .checkout-wrap, html body .cart-wrap, html body .empty-cart,
html body [class*="empty"], html body [class*="checkout"] {
  background: #ffffff !important; border: none !important; color: var(--tls-text) !important;
}
html body .empty-cart h1, html body .empty-cart h2, html body .empty-cart [class*="title"] { color: var(--tls-head) !important; text-shadow: none !important; }
html body .empty-cart p, html body [class*="empty"] p { color: var(--tls-text) !important; }
html body .step-section, html body .summary-card { background: #fff !important; }

/* Buttons — catch-all */
html body a[class*="btn"]:not(.btn-ghost):not(.nav-cta):not(.cart-btn),
html body button[class*="btn"]:not(.btn-ghost):not(.copy-btn):not(.net-btn):not(.edit-btn):not(.logout-btn),
html body [class*="apply-btn"], html body [class*="cta-btn"] {
  background: var(--tls-slate) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 2px !important;
  text-transform: uppercase;
  font-weight: 700 !important;
  letter-spacing: 0.05em;
  text-shadow: none !important;
}
html body a[class*="btn"]:not(.btn-ghost):not(.nav-cta):not(.cart-btn) *,
html body button[class*="btn"]:not(.btn-ghost) * { color: #fff !important; }

/* Nav CTA must never wrap */
html body .nav-cta { white-space: nowrap !important; }
@media (max-width: 1300px) { html body .nav-cta { display: none !important; } }

/* Page hero band buttons stay readable */
html body .page-hero a[class*="btn"], html body [class*="page-hero"] a[class*="btn"] { color: #fff !important; }

/* Inline gold/amber CTA anchors */
html body a[style*="background:var(--gold)"],
html body a[style*="background: var(--gold)"],
html body a[style*="background:var(--amber)"],
html body button[style*="background:var(--gold)"] {
  background: var(--tls-slate) !important;
  color: #ffffff !important;
  border-radius: 2px !important;
  font-family: 'Open Sans', sans-serif !important;
  text-transform: uppercase;
}

/* Support widget bubbles readable */
html body .support-tooltip, html body [class*="tooltip"] { background: #fff !important; color: var(--tls-head) !important; border: 1px solid var(--tls-line) !important; }
html body .support-btn, html body [class*="support-btn"], html body .whatsapp, html body .telegram { color: #fff !important; }
html body [class*="tooltip"] * , html body [class*="chat-label"], html body [class*="bubble"] { color: var(--tls-head) !important; }

/* =====================================================================
   TLS THEME v2 — typography, chrome and contrast corrections.
   Matches the reference site: Helvetica/Arial system sans, navy header,
   yellow CTAs, white content surfaces, no leftover dark artefacts.
   ===================================================================== */

/* --- Typography: reference site uses a plain Helvetica/Arial stack --- */
html body,
html body *:not(code):not(pre):not(kbd):not(samp):not([style*="monospace"]):not(.mono):not(.wallet-address) {
  font-family: 'Open Sans', Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif !important;
}
html body code, html body pre, html body .mono, html body .wallet-address,
html body [style*="monospace"] { font-family: 'SFMono-Regular', Menlo, Consolas, monospace !important; }

html body h1 { font-size: clamp(30px, 5vw, 54px) !important; line-height: 1.12 !important; letter-spacing: 0 !important; }
html body h2 { font-size: clamp(22px, 3.2vw, 34px) !important; line-height: 1.2 !important; }
html body h3 { text-transform: none !important; }
html body p { line-height: 1.7 !important; }
html body strong, html body b { color: var(--tls-head) !important; }
html body .hero strong, html body .hero b,
html body [class*="dark"] strong, html body footer strong { color: inherit !important; }

/* --- Kill the legacy announcement bar sitewide (reference has none) --- */
html body .topbar { display: none !important; }

/* --- Header alignment: logo left, nav right, even breathing room --- */
html body nav {
  display: flex !important; align-items: center !important;
  gap: 18px !important; padding: 0 24px !important;
}
html body nav .logo { margin-right: auto !important; font-size: 20px !important; white-space: nowrap; }
html body .nav-links { display: flex !important; align-items: center !important; gap: 2px !important; margin: 0 !important; }
html body .nav-links a { padding: 10px 9px !important; font-size: 11.8px !important; letter-spacing: 0.07em !important; }
html body .nav-cta { padding: 11px 16px !important; font-size: 12px !important; white-space: nowrap; }
@media (max-width: 1180px) {
  html body .nav-links, html body .nav-cta { display: none !important; }
  html body .hamburger { display: flex !important; }
}

/* --- Hero sub tag (sits under the marketplace pill) --- */
html body .hero-sub-tag {
  display: inline-block; margin: 12px auto 0; color: #fff !important;
  background: transparent !important; border: none !important;
  font-size: 14px !important; letter-spacing: 0.04em; text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
html body .hero-sub-tag { display: block !important; width: 100%; text-align: center; }
html body .hero-tag { display: inline-block !important; }

/* --- Inner page hero band: full width, no empty column --- */
html body .page-hero, html body .sub-hero, html body .inner-hero {
  background: var(--tls-navy) !important; padding: 54px 0 !important; min-height: 0 !important;
}
html body .page-hero-inner, html body .sub-hero-inner, html body .inner-hero-inner {
  display: block !important; max-width: 1280px; margin: 0 auto; padding: 0 24px !important; text-align: left;
}
html body .page-hero h1, html body .sub-hero h1, html body .inner-hero h1 { color: #fff !important; text-shadow: none !important; }
html body .page-hero p, html body .sub-hero p, html body .inner-hero p,
html body .page-hero .breadcrumb, html body .page-hero a { color: rgba(255,255,255,0.86) !important; }
html body .page-hero a:hover { color: var(--tls-yellow) !important; }

/* --- Forms: consistent, always legible --- */
html body input, html body select, html body textarea {
  background: #fff !important; color: #23303c !important;
  border: 1px solid #cdd6dd !important; border-radius: 3px !important;
}
html body input::placeholder, html body textarea::placeholder { color: #8a97a3 !important; opacity: 1; }
html body input:focus, html body select:focus, html body textarea:focus {
  outline: none !important; border-color: var(--tls-slate) !important;
  box-shadow: 0 0 0 3px rgba(77,101,121,0.15) !important;
}
html body label { color: var(--tls-head) !important; font-weight: 600 !important; }

/* --- Buttons --- */
html body button, html body .btn, html body .place-order-btn, html body .cta-primary {
  font-weight: 700 !important; letter-spacing: 0.04em;
}
html body .place-order-btn, html body .cta-primary, html body .btn-primary {
  background: var(--tls-yellow) !important; color: var(--tls-navy) !important;
  border: none !important; border-radius: 3px !important;
}
html body .place-order-btn:hover, html body .cta-primary:hover { background: var(--tls-yellow-dark) !important; }

/* --- Floating support widget + phone card: no overlap, no ghost pills --- */
html body .support-tooltip {
  opacity: 0 !important; pointer-events: none !important;
  background: var(--tls-navy) !important; color: #fff !important;
  font-size: 12px; padding: 5px 10px; border-radius: 3px; white-space: nowrap;
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  transition: opacity .15s ease;
}
html body .support-btn:hover .support-tooltip { opacity: 1 !important; }
html body .support-widget {
  position: fixed !important; right: 18px !important; bottom: 18px !important;
  display: flex !important; flex-direction: column !important; gap: 12px !important; z-index: 60 !important;
}
html body .support-btn.whatsapp { background: #25D366 !important; }
html body .support-btn.telegram { background: #229ED9 !important; }
html body .tls-phone-card {
  left: 18px !important; right: auto !important; bottom: 18px !important; z-index: 55 !important;
}
@media (max-width: 700px) {
  html body .tls-phone-card { left: 10px !important; bottom: 10px !important; }
  html body .support-widget { right: 12px !important; bottom: 12px !important; }
}

/* --- Tables (inventory) --- */
html body table { background: #fff !important; }
html body thead th { background: var(--tls-navy) !important; color: #fff !important; text-transform: uppercase; font-size: 11.5px !important; letter-spacing: 0.07em; }
html body tbody td { color: #45525e !important; border-bottom: 1px solid var(--tls-line) !important; }
html body tbody tr:hover { background: #f7f9fa !important; }

/* --- Section rhythm --- */
html body section { background: #fff; }
html body .section-alt, html body .bg-soft { background: var(--tls-soft) !important; }
html body footer { background: var(--tls-navy) !important; color: rgba(255,255,255,0.82) !important; }
html body footer a { color: rgba(255,255,255,0.82) !important; }
html body footer a:hover { color: var(--tls-yellow) !important; }
html body footer h3, html body footer h4, html body footer strong { color: #fff !important; }

/* --- Payment method tabs (card / crypto) --- */
html body .pay-method-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 22px; }
html body .pay-method {
  border: 2px solid #d7dee4 !important; border-radius: 4px; padding: 16px 14px; cursor: pointer;
  background: #fff !important; text-align: center; transition: all .15s ease;
}
html body .pay-method:hover { border-color: var(--tls-slate) !important; }
html body .pay-method.active { border-color: var(--tls-navy) !important; background: #f2f6f8 !important; }
html body .pay-method-name { display: block; font-weight: 800; color: var(--tls-head) !important; font-size: 14px; }
html body .pay-method-sub { display: block; font-size: 11.5px; color: #6d7a85 !important; margin-top: 3px; }
html body .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html body .card-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { html body .card-grid { grid-template-columns: 1fr; } html body .pay-method-tabs { grid-template-columns: 1fr; } }

/* =====================================================================
   TLS THEME v3 — universal readability pass.
   The legacy dark theme left near-white text tokens in place while the
   surfaces became white. Re-point every ink token to dark values and
   re-assert light text only inside genuinely dark regions.
   ===================================================================== */

html, html body {
  --ink-100: #3a4652 !important;
  --ink-300: #4f5c68 !important;
  --ink-500: #66727d !important;
  --ink: #2b3d4f !important;
  --ink-light: #4a5560 !important;
  --ink-mid: #4a5560 !important;
  --text: #3a4652 !important;
  --text-light: #5a6672 !important;
  --text-muted: #66727d !important;
  --muted: #66727d !important;
  --white: #ffffff !important;
  --border: #e2e6ea !important;
  --line: #e2e6ea !important;
  --line-strong: #d3dade !important;
}

/* Any content sitting on a white/soft surface reads dark. */
html body section, html body main, html body article,
html body .card, html body [class*="-card"], html body [class*="card-"],
html body .panel, html body .box, html body .tile, html body .item,
html body .faq-item, html body .step, html body .feature, html body .use-card {
  color: #3a4652;
}
html body .use-desc, html body .feature-desc, html body .step-desc,
html body .card-desc, html body [class*="-desc"], html body [class*="-sub"]:not(.pay-method-sub),
html body [class*="-text"], html body [class*="-body"], html body .lead, html body .muted,
html body .section-sub, html body .subtitle, html body small, html body .note {
  color: #4a5560 !important;
}
html body .use-title, html body [class*="-title"]:not(.section-title),
html body [class*="-name"]:not(.pay-method-name), html body [class*="-label"],
html body [class*="-heading"] { color: var(--tls-head) !important; }
html body li, html body dd, html body dt, html body figcaption { color: #4a5560; }

/* Dark regions keep light text (asserted last so they win). */
html body header, html body header *,
html body footer, html body footer *,
html body .hero, html body .hero *,
html body .page-hero, html body .page-hero *,
html body .sub-hero, html body .sub-hero *,
html body .inner-hero, html body .inner-hero *,
html body [class*="dark-band"], html body [class*="dark-band"] *,
html body .cta-band, html body .cta-band *,
html body thead th, html body .support-btn, html body .support-btn * {
  color: #fff;
}
html body .hero .hero-tag, html body .hero-sub-tag { color: #fff !important; }
html body header .nav-cta { color: var(--tls-navy) !important; }
html body .hero a[class*="btn"], html body .page-hero a[class*="btn"] { color: #fff !important; }
html body footer a:hover, html body .hero .stat-value { color: var(--tls-yellow) !important; }

/* Legacy floating phone card is retired sitewide. */
html body .tls-phone-card { display: none !important; }

/* Support icons: no floating text labels at all. */
html body .support-tooltip, html body .support-btn .support-tooltip { display: none !important; }

/* --- v4: hero legibility + inner-page hero surfaces --- */
/* Decorative full-bleed photos behind inner-page heroes hurt readability. */
html body img[class*="hero-bg"], html body img[class*="-hero-bg"] { display: none !important; }
html body .broker-hero, html body .sell-hero, html body .about-hero,
html body [class*="-hero"]:not(.hero):not([class*="page-hero"]):not([class*="-hero-inner"]):not(.mk-hero):not(.broker-hero) {
  background: var(--tls-soft) !important;
}
html body .sell-hero h1,
html body [class*="-hero"]:not(.hero):not([class*="page-hero"]):not([class*="-hero-inner"]):not(.mk-hero):not(.broker-hero) h1 { color: var(--tls-head) !important; text-shadow: none !important; }

/* Branded card hero: dark scrim so white type always reads. */
html body .hero { position: relative; }
html body .hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,26,38,0.92) 0%, rgba(16,26,38,0.78) 38%, rgba(16,26,38,0.28) 70%, rgba(16,26,38,0.08) 100%);
  pointer-events: none; z-index: 0;
}
html body .hero > * { position: relative; z-index: 1; }
html body .hero h1, html body .hero p, html body .hero .hero-sub,
html body .hero .hero-tag, html body .hero-sub-tag { color: #fff !important; text-shadow: 0 1px 12px rgba(0,0,0,0.35); }

/* Trust bar sits on a light surface now. */
html body .trust-bar { background: var(--tls-soft) !important; border-top: 1px solid var(--tls-line) !important; border-bottom: 1px solid var(--tls-line) !important; }
html body .trust-bar *, html body .trust-badge, html body .trust-stat { color: #3a4652 !important; }
html body .trust-stat-label { color: #5a6672 !important; }
html body .hero-sub-tag, html body .hero-stat-label, html body .hero-stat-num,
html body .hero .hero-sub, html body .hero-tag { opacity: 1 !important; }
html body .hero-stat-label { color: rgba(255,255,255,0.95) !important; }
/* Step badges: uniform light chip so every number reads. */
html body .step-num { background: #f0f4f7 !important; color: var(--tls-head) !important; border: 1px solid #cfd7dd !important; }

/* Cart row controls */
html body .qty-stepper button {
  background: #f0f4f7 !important; color: var(--tls-head) !important;
  border: 1px solid #cfd7dd !important; border-radius: 3px !important;
}
html body .qty-stepper button:hover { background: #e3eaef !important; border-color: var(--tls-navy) !important; }
html body .qty-stepper, html body .qty-stepper span { color: #4a5560 !important; }
html body .cart-item-remove, html body [class*="remove"] {
  background: transparent !important; border: none !important;
  color: #b3261e !important; box-shadow: none !important; font-weight: 700;
}

/* ==========================================================================
   FINAL VISIBILITY PASS (v5)
   Every text element must beat 4.5:1 against the surface behind it.
   ========================================================================== */

/* --- Dark navy inner-page hero bands --- */
html body .page-hero h1, html body .page-hero h2, html body .page-hero h3,
html body .page-hero p, html body .page-hero div, html body .page-hero span,
html body .page-hero li, html body .page-hero strong, html body .page-hero b,
html body .page-hero em, html body .page-hero label, html body .page-hero small {
  color: #fff !important; text-shadow: none !important;
}
html body .page-hero a:not([class*="btn"]) { color: var(--tls-yellow) !important; }
html body .page-hero .earn-calculator,
html body .page-hero [class*="calculator"],
html body .page-hero .card {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.24) !important;
}
html body .earn-row-value, html body .earn-row-label { color: #fff !important; }

/* --- Marketplace / broker hero bands are dark, not light --- */
html body .mk-hero, html body .broker-hero { background: var(--tls-navy) !important; }
html body .mk-hero, html body .mk-hero *, html body .mk-hero h1,
html body .broker-hero, html body .broker-hero *, html body .broker-hero h1 { color: #fff !important; }
html body .mk-hero em, html body .broker-hero em { color: var(--tls-yellow) !important; font-style: normal; }
html body .mk-badges span { border-color: rgba(255,255,255,0.35) !important; }

/* --- Footer --- */
html body footer, html body footer p, html body footer li, html body footer span,
html body footer div, html body footer small, html body footer a,
html body .footer-brand p, html body .footer-top *, html body .footer-bottom * {
  color: rgba(255,255,255,0.92) !important;
}
html body footer h1, html body footer h2, html body footer h3,
html body footer h4, html body footer h5, html body footer [class*="footer-col"],
html body footer [class*="footer-title"] { color: #fff !important; }
html body footer a:hover { color: var(--tls-yellow) !important; }

/* --- Calculator: light panels with dark type --- */
html body .calc-inputs, html body .calc-results, html body .calc-panel,
html body .result-card, html body .calc-card {
  background: #fff !important; border: 1px solid var(--tls-line) !important;
}
html body .calc-title, html body .form-section-title, html body .form-label,
html body .value-display, html body .result-title, html body .calc-inputs label {
  color: var(--tls-head) !important;
}
html body .calc-sub, html body .range-labels span, html body .calc-note,
html body .calc-inputs p { color: #4a5560 !important; }

/* --- Light content sections must never carry white type --- */
html body .section, html body .steps, html body .faqs { color: var(--tls-text) !important; }
html body .section-inner p, html body .section-inner li, html body .section-inner span,
html body .section-inner strong, html body .section-inner small,
html body .steps p, html body .steps li, html body .step p, html body .step span,
html body .faqs p, html body .faqs li,
html body .totals, html body .totals span, html body .totals strong {
  color: var(--tls-text) !important;
}
html body .section-inner > div > div > div:not([class]),
html body .section-inner div:not([class]) { color: var(--tls-text) !important; }
html body .section-inner h1, html body .section-inner h2, html body .section-inner h3,
html body .section-inner h4, html body .step-title, html body .faq-q {
  color: var(--tls-head) !important;
}

/* --- Accent chips / badges that were amber-on-white --- */
html body .cat, html body .faq-cat { color: var(--tls-navy) !important; font-weight: 700 !important; }
html body .test-stars { color: #a9761a !important; }
html body .broker-step-num, html body .step-num {
  background: #fff !important; color: var(--tls-navy) !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
}

/* --- Amber CTA bands: navy type, never white/grey --- */
html body .cta, html body .cta * { color: var(--tls-navy) !important; }
html body .cta a, html body .cta a:hover { color: var(--tls-navy) !important; font-weight: 700 !important; }
html body .tier-cta {
  background: var(--tls-yellow) !important; color: var(--tls-navy) !important;
  font-weight: 700 !important; border: none !important;
}

/* --- Author-intended white type stays white (dark inline panels) --- */
html body [style*="color:rgba(255,255,255"],
html body [style*="color: rgba(255,255,255"],
html body [style*="color:var(--white)"] { color: rgba(255,255,255,0.92) !important; }

/* ...except inside surfaces the light theme turned white */
html body .card [style*="color:rgba(255,255,255"],
html body .breakdown, html body .breakdown *, html body .breakdown-factor,
html body .breakdown [style*="color:rgba(255,255,255"] { color: var(--tls-head) !important; }
html body .breakdown-item { background: #fff !important; border: 1px solid var(--tls-line) !important; }
html body .consent-row label, html body form label, html body .card label,
html body .section-inner label { color: var(--tls-head) !important; }
html body .consent-row, html body .consent-row * { color: var(--tls-text) !important; }
html body .form-note, html body .privacy-note { color: #4a5560 !important; }

/* --- Sell page earnings card sits on the dark hero band --- */
html body .earn-calc-title, html body .earn-calculator [class*="title"] { color: #fff !important; }
html body .earn-row-value.highlight, html body .earn-row-value .highlight { color: #7ee0af !important; }
html body .earn-calculator p, html body .earn-row-label { color: rgba(255,255,255,0.88) !important; }

/* --- Highest-priority white-type keepers (dark inline panels) --- */
html body .section-inner div[style*="color:rgba(255,255,255"],
html body .section-inner div[style*="color:var(--white)"],
html body div[style*="color:rgba(255,255,255"][style*="background:rgba(255,255,255,0.04)"] { color: rgba(255,255,255,0.92) !important; }
html body .section-inner div[style*="color:var(--ink-light)"],
html body div[style*="color:var(--ink-light)"] { color: #4a5560 !important; }