/* =========================================================
   E-TOKEN · Professional Theme
   Camada de tema sobre Bootstrap 5 + styles.css
   Dark fintech · Roxo como marca · Verde neon (positivo) · Vermelho (negativo)
   ========================================================= */

/* ---------- Tokens de marca ---------- */
:root {
  --bg-body: #070b14;
  --bg-elevated: #0c1220;
  --bg-card: #0f1626;
  --bg-card-2: #141e31;
  --bg-input: #0b1120;

  --line: #1d2a42;
  --line-soft: #16213a;

  --text: #e8eef7;
  --text-muted: #8da1b8;
  --text-faint: #5f7289;

  --brand: #7c3aed;
  --brand-2: #5b21b6;
  --brand-glow: rgba(124, 58, 237, 0.35);

  --green: #22c55e;
  --green-neon: #34e08d;
  --green-2: #15803d;
  --green-glow: rgba(34, 197, 94, 0.28);

  --red: #ef4444;
  --red-2: #b91c1c;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-glow: 0 8px 24px var(--brand-glow);
}

/* ---------- Base ---------- */
html,
body {
  background-color: var(--bg-body) !important;
  color: var(--text) !important;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: 0.1px;
}

h1, h2, h3, h4, h5, h6,
p, a, span, label, small, li, td, th {
  color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  letter-spacing: -0.2px;
}

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

a {
  text-decoration: none;
}
a:hover {
  color: #fff;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-elevated);
}
::-webkit-scrollbar-thumb {
  background: var(--brand);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--brand-2);
}

::selection {
  background: var(--brand);
  color: #fff;
}

/* ---------- Sidebar ---------- */
.sidebar-wrapper {
  background: linear-gradient(180deg, #0b0f1c 0%, #080c16 100%) !important;
  border-right: 1px solid var(--line) !important;
}

.sidebar-wrapper .sidebar-heading {
  padding: 28px 26px 8px !important;
}
.sidebar-wrapper .sidebar-heading #logo {
  max-height: 52px;
  filter: drop-shadow(0 4px 14px var(--brand-glow));
}

.sidebar-wrapper .nav {
  padding: 18px 16px 0 !important;
  width: 16.5rem !important;
}
@media (min-width: 992px) {
  .sidebar-wrapper .nav {
    width: 18rem !important;
  }
}

.sidebar-wrapper .nav .nav-item {
  margin-bottom: 6px !important;
}

.sidebar-wrapper .nav .nav-item .nav-link {
  padding: 11px 16px !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  font-size: 14.5px;
  transition: all 0.2s ease;
}

.sidebar-wrapper .nav .nav-item .nav-link:hover {
  color: #fff !important;
  background: rgba(124, 58, 237, 0.12) !important;
}

.sidebar-wrapper .nav .nav-item .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  box-shadow: 0 6px 18px var(--brand-glow);
}

.sidebar-wrapper .nav .nav-item .nav-link i {
  width: 22px;
  font-size: 15px;
  color: inherit !important;
  text-align: center;
}

.sidebar-wrapper .nav .nav-item .nav-link:hover span,
.sidebar-wrapper .nav .nav-item .nav-link:hover i,
.sidebar-wrapper .nav .nav-item .nav-link.active span,
.sidebar-wrapper .nav .nav-item .nav-link.active i {
  color: #fff !important;
}

.sidebar-wrapper .text-center {
  padding: 10px 0 6px;
}

.sidebar-wrapper .text-center a img {
  border-radius: 4px;
  opacity: 0.85;
  transition: transform 0.15s ease, opacity 0.15s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.sidebar-wrapper .text-center a:hover img {
  opacity: 1;
  transform: scale(1.12);
}

/* ---------- Navbar ---------- */
.page-content-wrapper .navbar {
  background: rgba(10, 15, 27, 0.82) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  z-index: 1021;
}

.page-content-wrapper .navbar .nav-icon {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  padding: 9px 16px !important;
  min-width: 96px;
  justify-content: center;
  transition: border-color 0.2s ease;
}

.page-content-wrapper .navbar .nav-icon:hover {
  border-color: var(--brand);
}

.page-content-wrapper .navbar .nav-icon span {
  font-weight: 600 !important;
  font-size: 14px;
}

/* Cápsulas de saldo */
#span_balance {
  color: var(--green-neon) !important;
}
#span_balance_tkn {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.35), rgba(91, 33, 182, 0.35)) !important;
  border-radius: 8px;
  padding: 3px 10px;
}

/* Botões de ação do topo */
.navbar .btn-action {
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 9px 18px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  line-height: 1.2 !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  transition: all 0.2s ease;
}
.navbar .btn-action.btn-deposit {
  background: linear-gradient(135deg, var(--green), var(--green-2)) !important;
}
.navbar .btn-action.btn-deposit:hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 22px var(--green-glow);
}
.navbar .btn-action.btn-withdraw {
  background: linear-gradient(135deg, #e11d48, var(--red-2)) !important;
}
.navbar .btn-action.btn-withdraw:hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.28);
}

.page-content-wrapper .navbar .dropdown-item {
  color: var(--text);
}
.page-content-wrapper .navbar .dropdown-item:hover {
  background: var(--brand);
  color: #fff;
}

/* ---------- Área principal ---------- */
.main-content {
  background-color: var(--bg-body) !important;
}

.main-content .mainchart {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card);
}

/* Títulos de seção */
.titulo-marketplace {
  font-size: 1.55rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  gap: 12px !important;
}
.titulo-marketplace i {
  font-size: 1.15rem !important;
  color: var(--brand) !important;
  background: rgba(124, 58, 237, 0.15);
  border: 1px solid var(--brand-glow);
  padding: 10px;
  border-radius: 12px;
  filter: drop-shadow(0 4px 10px var(--brand-glow));
}

/* ---------- Cards ---------- */
.card {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card);
  color: var(--text);
}
.card.shadow {
  box-shadow: var(--shadow-card) !important;
}
.card-body {
  background: transparent;
  color: var(--text);
  padding: 22px 24px;
}
.card-title {
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 1.05rem;
}
.card .fs-4 {
  color: var(--green-neon) !important;
  font-weight: 700;
}

/* Lista de ativos */
.list-group-item {
  background: var(--bg-card-2) !important;
  border: 1px solid var(--line-soft) !important;
  border-radius: var(--radius-sm) !important;
  margin-bottom: 8px;
  color: var(--text) !important;
  padding: 12px 16px !important;
  transition: border-color 0.2s ease;
}
.list-group-item:hover {
  border-color: var(--brand-glow);
}
.list-group-item small {
  color: var(--text-muted) !important;
}
.list-group-item a.btn-link,
.list-group-item .btn-link {
  color: var(--brand) !important;
  text-decoration: none !important;
  font-weight: 600;
}
.list-group-item a.btn-link:hover {
  color: #b18aff !important;
  text-decoration: underline !important;
}
.crypto-logo {
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  padding: 3px;
}
.crypto-info strong {
  color: var(--text);
  font-size: 14.5px;
}

/* Botões de saldo (Deposit / Withdraw / Redeem) */
.saldo-acoes {
  gap: 8px;
}
.btn-saldo {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 14px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  transition: all 0.2s ease;
}
.btn-saldo:hover {
  filter: brightness(1.12);
  box-shadow: var(--shadow-glow);
}

/* ---------- Botões globais ---------- */
.btn-primary,
.btn-success {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}
.btn-primary:hover,
.btn-success:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow-glow);
}
.btn-danger {
  background: linear-gradient(135deg, var(--red), var(--red-2)) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
}
.btn-outline-success {
  color: var(--green-neon) !important;
  border-color: var(--green) !important;
  font-weight: 600;
}
.btn-outline-success:hover {
  background: var(--green) !important;
  color: #04130a !important;
}
.btn-outline-primary {
  color: #b18aff !important;
  border-color: var(--brand) !important;
  font-weight: 600;
}
.btn-outline-primary:hover {
  background: var(--brand) !important;
  color: #fff !important;
}

.primary-btn {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  padding: 9px 16px !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}
.primary-btn:hover {
  filter: brightness(1.1);
  box-shadow: var(--shadow-glow);
  color: #fff !important;
}

/* ---------- Formulários ---------- */
.form-control,
.form-select {
  background-color: var(--bg-input) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text) !important;
  padding: 10px 14px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-control::placeholder {
  color: var(--text-faint) !important;
}
.form-control:focus,
.form-select:focus,
.form-range:focus {
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 4px var(--brand-glow) !important;
  background-color: var(--bg-input) !important;
  color: var(--text) !important;
}
.form-label {
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  font-size: 13.5px !important;
}
.form-range::-webkit-slider-thumb {
  background: var(--brand);
}
.form-range::-moz-range-thumb {
  background: var(--brand);
}
.form-check-input:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}

/* ---------- Tabelas ---------- */
table {
  background: transparent;
}
.price-table th, .price-table td,
.recent-contact th, .recent-contact td {
  color: var(--text) !important;
}
.price-table tr,
.recent-contact tr {
  border-bottom-color: var(--line) !important;
}

/* ---------- Abas / pills ---------- */
.nav-pills .nav-link {
  color: var(--text-muted) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500;
}
.nav-pills .nav-link.active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 6px 16px var(--brand-glow);
}

/* ---------- Dropdown ---------- */
.dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-card);
}
.dropdown-menu .dropdown-item {
  color: var(--text) !important;
}
.dropdown-menu .dropdown-item:hover {
  background: var(--brand) !important;
  color: #fff !important;
}

/* ---------- Modal ---------- */
.modal-content {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card);
}
.modal-header,
.modal-footer {
  background: var(--bg-elevated) !important;
  border-color: var(--line) !important;
}
.modal-header .modal-title {
  color: var(--text) !important;
}
.modal-body {
  background: var(--bg-card) !important;
  color: var(--text) !important;
}

/* ---------- Login ---------- */
#body1 {
  background:
    radial-gradient(1100px 600px at 12% -8%, rgba(124, 58, 237, 0.28), transparent 62%),
    radial-gradient(900px 520px at 108% 28%, rgba(34, 197, 94, 0.10), transparent 58%),
    linear-gradient(160deg, #0b0f1c 0%, #070b14 100%) !important;
  min-height: 100vh;
}

.signin .signin-inner {
 /* background: rgba(15, 22, 38, 0.72) !important;*/
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
 /* border: 1px solid var(--line);*/
/*  border-radius: 20px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);*/
  max-width: 1080px !important;
 /* padding: 18px !important;*/
}

.signin .signin-inner .signin-left {
  background:
    radial-gradient(520px 320px at 85% 8%, rgba(52, 224, 141, 0.16), transparent 60%),
    radial-gradient(700px 520px at 0% 100%, rgba(124, 58, 237, 0.35), transparent 65%),
    linear-gradient(150deg, #1a1140 0%, #120c2b 55%, #0c1024 100%) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(124, 58, 237, 0.22);
  overflow: hidden;
  padding: 34px 30px !important;
}

.signin .signin-inner .signin-left img.img-fluid {
  filter: drop-shadow(0 6px 22px var(--brand-glow));
}

.signin .signin-inner .signin-left hr {
  border-color: rgba(255, 255, 255, 0.12);
  opacity: 1;
}

.signin .signin-inner .signin-left .auth-title {
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  line-height: 1.25;
  color: #fff !important;
}

.signin .signin-inner .signin-left .auth-subtitle {
  color: var(--text-muted) !important;
  font-size: 15px;
  line-height: 1.6;
}

.signin .signin-inner .signin-left .feature-list {
  padding: 0 !important;
  list-style: none;
}
.signin .signin-inner .signin-left .feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text) !important;
  font-size: 14.5px;
  padding: 7px 0;
}
.signin .signin-inner .signin-left .feature-list i {
  color: var(--green-neon) !important;
  font-size: 15px;
}

.signin .signin-inner .signin-left .text-center a img {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  border-radius: 4px;
  transition: transform 0.15s ease;
}
.signin .signin-inner .signin-left .text-center a:hover img {
  transform: scale(1.12);
}

.form-wrapper,
#card_content {
  border: none !important;
  border-radius: 14px !important;
  background: rgba(13, 18, 32, 0.85) !important;
  padding: 34px 30px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.signin .signin-inner .form-wrapper a,
#card_content a {
  text-decoration: none;
}
#card_content a.primary {
  color: #a78bfa !important;
  font-weight: 600;
}
#card_content a.primary:hover {
  color: #c4b5fd !important;
}

/* Botão principal do form */
.primary-outline {
  padding: 11px 42px !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  box-shadow: 0 10px 26px var(--brand-glow);
  transition: all 0.2s ease;
}
.primary-outline:hover {
  filter: brightness(1.12);
  color: #fff !important;
  box-shadow: 0 12px 34px rgba(124, 58, 237, 0.55);
}

.sombratexto {
  text-shadow: none !important;
  color: var(--text) !important;
}

/* ---------- Moldura de loading do app (loaded sections) ---------- */
#mainContent img[src*="loading"] {
  border-radius: var(--radius);
}

/* ---------- Informatividade: tags de status ---------- */
.green-tag {
  color: var(--green-neon) !important;
  background: rgba(34, 197, 94, 0.12) !important;
  border: 1px solid rgba(34, 197, 94, 0.3);
}
.red-tag {
  color: var(--red) !important;
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

/* ---------- Marketplace ---------- */
.mpk-dashboard-wrapper {
  max-width: 100% !important;
}
.mpk-dashboard-header {
  gap: 14px !important;
}
.mpk-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-card);
  padding: 16px 18px !important;
}
.mpk-card-title {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.mpk-label {
  color: var(--text-faint) !important;
}
.mpk-value {
  color: var(--text) !important;
}

.promotion-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.promotion-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), var(--shadow-glow);
  border-color: var(--brand-glow);
}

.promo-img img {
  border-radius: 10px !important;
  border: 1px solid var(--line-soft) !important;
}
.promo-tag {
  background: rgba(7, 11, 20, 0.82) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--green-neon) !important;
  border: 1px solid rgba(52, 224, 141, 0.4);
  font-weight: 700 !important;
  font-size: 12.5px;
}
.promo-tag small {
  color: var(--green-neon) !important;
}

.promo-content a {
  color: var(--text) !important;
}
.promo-content a:hover {
  color: #fff !important;
}
.promo-content small {
  color: var(--text-muted) !important;
}

.promotion-card .outline-btn-lg,
.promo-content button,
.outline-btn-lg {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  padding: 9px 14px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  cursor: pointer;
}
.promotion-card .outline-btn-lg:hover,
.promo-content button:hover,
.outline-btn-lg:hover {
  filter: brightness(1.12);
  box-shadow: var(--shadow-glow);
}

.promotion-card.card-on-sale {
  border-color: rgba(34, 197, 94, 0.5);
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.18), var(--shadow-card);
}

button.mini-button {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
}

/* Seção My NFTs */
.token-item {
  background: linear-gradient(160deg, var(--bg-card-2), var(--bg-card)) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.token-item:hover {
  transform: translateY(-3px);
  border-color: var(--brand-glow);
  box-shadow: var(--shadow-glow);
}

/* Botão de fusão */
.fusion-button {
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  color: #fff !important;
  animation: none !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-glow) !important;
}
.fusion-button:hover {
  filter: brightness(1.12);
  transform: scale(1.03);
}

/* Tabela da rede */
#tabelarede table th,
#tabelarede table td {
  border-color: var(--line) !important;
  color: var(--text) !important;
}

.custom-input {
  color: var(--text) !important;
}

/* ---------- Responsivo (mobile: navbar) ---------- */
@media (max-width: 991px) {
  .page-content-wrapper .navbar {
    height: 58px !important;
  }
}