/* =====================================================================
   BITCOIN INICIANTES — Estilos dos widgets
   (ticker BTC, fear & greed, mempool, simulador IF, DCA, mural)
   ===================================================================== */

:root {
  --btc-orange: #ff9f1a;
  --btc-yellow: #ffcc00;
  --btc-green: #00ffae;
  --btc-red: #ff4d6d;
  --btc-blue: #00c6ff;
  --btc-purple: #c084fc;
}

/* =====================================================================
   1. CARD COTAÇÃO BTC (HERO)
   ===================================================================== */
.btc-ultra-card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 16px 16px 12px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)),
    #070707;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
  animation: cardSlideIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) both,
             borderGlow 3.5s ease-in-out 1s infinite;
}
.btc-bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .15;
  pointer-events: none;
}
.btc-glow-1 { width: 220px; height: 220px; background: var(--btc-orange); top: -120px; right: -80px; }
.btc-glow-2 { width: 180px; height: 180px; background: var(--btc-blue); bottom: -90px; left: -60px; }

.btc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.btc-coin { display: flex; align-items: center; gap: 12px; }
.btc-icon-wrap { padding: 2px; border-radius: 50%; background: linear-gradient(135deg, var(--btc-yellow), var(--btc-orange)); }
.btc-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--btc-orange);
  color: #fff; font-size: 1.15rem; font-weight: 900;
  box-shadow: 0 0 20px rgba(255,159,26,.22);
}
.btc-name { color: #fff; font-size: 1rem; font-weight: 800; }
.btc-pair { color: #8d8d8d; font-size: .66rem; letter-spacing: .16em; margin-top: 2px; }

.btc-status {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05);
}
.btc-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #666; }
.btc-live-dot.live {
  background: var(--btc-green);
  box-shadow: 0 0 10px var(--btc-green), 0 0 20px var(--btc-green);
  animation: pulse 1.4s infinite;
}
.btc-status-text { color: #fff; font-size: .72rem; font-weight: 700; }

.btc-price-area { margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.btc-change-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.95rem; font-weight: 700;
  padding: 5px 11px; border-radius: 8px; letter-spacing: 0.01em;
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5);
  transition: .3s ease; white-space: nowrap; align-self: center; margin-top: 4px;
}
.btc-change-badge.up { background: rgba(0,255,174,0.15); color: var(--btc-green); }
.btc-change-badge.down { background: rgba(255,77,109,0.15); color: var(--btc-red); }
.btc-price {
  font-size: clamp(2.6rem, 3.3vw, 3.3rem);
  line-height: 1; font-weight: 900; letter-spacing: -0.05em;
  color: #fff; transition: .25s ease;
}
.btc-price.up { color: var(--btc-green); text-shadow: 0 0 20px rgba(0,255,174,.30); }
.btc-price.down { color: var(--btc-red); text-shadow: 0 0 20px rgba(255,77,109,.30); }

.btc-cols-grid {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; margin-bottom: 12px; overflow: hidden;
}
.btc-col-item { flex: 1; padding: 18px 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.btc-col-item:first-child { flex: 1.9; }
.btc-col-divider { width: 1px; background: rgba(255,255,255,.10); flex-shrink: 0; }
.bci-label { font-size: .72rem; font-weight: 700; color: #fff; letter-spacing: .04em; text-transform: uppercase; }
.bci-price { font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.bci-change { font-size: .82rem; font-weight: 700; color: #8d8d8d; display: flex; align-items: center; gap: 3px; }
.bci-change.up { color: #4ade80; }
.bci-change.down { color: var(--btc-red); }

.btc-chart-box {
  padding: 10px 10px 6px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,255,174,.05), rgba(0,198,255,.02), rgba(255,255,255,.01));
  border: 1px solid rgba(0,255,174,.08); margin-bottom: 10px; min-height: 90px;
}
#btcMiniChart { width: 100%; display: block; }

.btc-footer { display: flex; justify-content: space-between; align-items: center; font-size: .66rem; letter-spacing: .14em; color: #8d8d8d; }
.btc-footer-left { display: flex; align-items: center; gap: 8px; }
.btc-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--btc-green); box-shadow: 0 0 12px var(--btc-green); animation: pulse 1.4s infinite; }
.btc-footer-right { color: var(--btc-blue); font-weight: 700; }

@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(28px) scale(0.97); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes borderGlow {
  0%, 100% { border-color: rgba(255,159,26,.15); box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04), 0 0 0px rgba(255,159,26,0); }
  50% { border-color: rgba(255,159,26,.35); box-shadow: 0 18px 45px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04), 0 0 24px rgba(255,159,26,.12); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: .6; }
}

@media (max-width: 640px) {
  .btc-ultra-card { max-width: 100%; padding: 14px; border-radius: 18px; }
  .btc-price { font-size: 2.3rem; }
}

/* =====================================================================
   2. FEAR & GREED INDEX
   ===================================================================== */
.fng-outer {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-radius: 20px; border: 1px solid #dde1e7; overflow: hidden;
  box-shadow: 0 6px 32px rgba(0,0,0,0.09); background: #ffffff;
  font-family: var(--font-body); margin-bottom: 1.2rem;
}
.fng-left { padding: 1.8rem 1.6rem 1.5rem; border-right: 1px solid #dde1e7; display: flex; flex-direction: column; background: #fff; }
.fng-left-header { display: flex; align-items: center; gap: 10px; margin-bottom: 0.2rem; }
.fng-logo-icon { width: 32px; height: 32px; background: #F7931A; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 900; font-size: 1.05rem; flex-shrink: 0; }
.fng-left-title { font-size: 1.05rem; font-weight: 700; color: #1a1a2e; letter-spacing: -0.01em; line-height: 1.25; }
.fng-left-sub { font-size: 0.72rem; color: #888; font-weight: 400; margin: 0.35rem 0 0.7rem; line-height: 1.4; }
.fng-divider { height: 1px; background: #eee; margin-bottom: 0.85rem; }
.fng-now-label { font-size: 0.82rem; font-weight: 600; color: #333; margin-bottom: 3px; }
.fng-now-sentiment { font-size: 1rem; font-weight: 700; margin-bottom: 0.5rem; }
.fng-gauge-wrap { position: relative; display: flex; flex-direction: column; align-items: center; flex: 1; margin-top: 0.3rem; }
.fng-svg { width: 100%; max-width: 260px; }
.fng-left-footer { font-size: 0.65rem; color: #aaa; margin-top: 0.8rem; display: flex; align-items: center; gap: 5px; line-height: 1.4; }
.fng-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; flex-shrink: 0; }
.fng-dot.live { background: #43A047; animation: pulse-dot 2s infinite; }
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(67,160,71,0.25); }
  50% { box-shadow: 0 0 0 7px rgba(67,160,71,0.07); }
}
.fng-right { padding: 1.8rem 1.6rem 1.5rem; display: flex; flex-direction: column; background: #fff; }
.fng-right-title { font-size: 1rem; font-weight: 700; color: #1a1a2e; margin-bottom: 1rem; letter-spacing: -0.01em; }
.fng-hist-item { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0; border-bottom: 1px solid #f0f0f0; }
.fng-hist-item:last-child { border-bottom: none; padding-bottom: 0; }
.fng-hist-period { font-size: 0.85rem; color: #444; font-weight: 500; line-height: 1.3; margin-bottom: 2px; }
.fng-hist-sent { font-size: 0.75rem; font-weight: 700; }
.fng-badge-circle { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; font-weight: 800; color: white; flex-shrink: 0; }
@media (max-width: 600px) {
  .fng-outer { grid-template-columns: 1fr; }
  .fng-left { border-right: none; border-bottom: 1px solid #dde1e7; padding: 1.4rem 1.2rem 1.2rem; }
  .fng-right { padding: 1.4rem 1.2rem 1.2rem; }
}

/* =====================================================================
   3. MEMPOOL FEES
   ===================================================================== */
.mempool-widget {
  margin-top: 56px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.08); overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3); background: #111; font-family: var(--font-body);
}
.mempool-header { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0.85rem 1.2rem 0.7rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.mempool-header-icon { width: 26px; height: 26px; background: #F7931A; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: white; font-weight: 900; font-size: 0.85rem; flex-shrink: 0; }
.mempool-header-title { font-size: 0.82rem; font-weight: 700; color: #9aa0aa !important; letter-spacing: 0.08em; text-transform: uppercase; }
.mempool-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--btc-green); margin-left: auto; animation: pulse-dot 2s infinite; display: none; }
.mempool-fees { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 1rem 1rem 0.4rem; }
.mempool-fee-col { padding: 0 0.35rem 0.8rem; text-align: center; background: transparent; }
.mempool-fee-label {
  display: inline-block; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.02em; text-transform: none;
  margin-bottom: 0.6rem; padding: 5px 10px; border-radius: 999px; color: #fff; white-space: nowrap;
}
.mempool-fee-col.active .mempool-fee-label { background: #0aab2f; }
.mempool-fee-col:nth-child(2) .mempool-fee-label { background: linear-gradient(90deg, #0f9d58, #4caf50); }
.mempool-fee-col:nth-child(3) .mempool-fee-label { background: linear-gradient(90deg, #4caf50, #9ccc65); }
.mempool-fee-col:nth-child(4) .mempool-fee-label { background: linear-gradient(90deg, #9ccc65, #cddc39); color: #1a1a2e; }
.mempool-fee-val { font-size: 1.5rem; font-weight: 900; color: #ffffff; line-height: 1; margin-bottom: 2px; font-family: var(--font-body); }
.mempool-fee-unit { font-size: 0.68rem; color: #9aa0aa; font-weight: 600; }
.mempool-fee-usd { font-size: 0.75rem; color: #22c55e; font-weight: 600; margin-top: 4px; }
.mempool-footer { padding: 0.45rem 1.2rem; border-top: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 6px; }
.mempool-footer-text { font-size: 0.6rem; color: #6c757d; font-weight: 500; }
.mempool-footer a { color: #F7931A; text-decoration: none; font-size: 0.6rem; font-weight: 600; }
.mempool-footer a:hover { text-decoration: underline; }
@media (max-width: 600px) {
  /* 2x2 para evitar que valores fracionados (0.2, 0.7) cortem */
  .mempool-fees { grid-template-columns: repeat(2, 1fr); gap: 0.8rem 0; }
  .mempool-fee-val { font-size: 1.35rem; }
}
@media (max-width: 380px) {
  .mempool-fee-val { font-size: 1.15rem; }
  .mempool-fee-label { font-size: 0.58rem; padding: 4px 8px; }
}

/* =====================================================================
   4. SIMULADOR INDEPENDÊNCIA FINANCEIRA (SIF)
   ===================================================================== */
.sif__wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.sif__wrap { font-family: var(--font-body); background: #ffffff; border: 1px solid #e2e4e9; border-radius: 16px; padding: 24px; width: 100%; color: #1a1d23; box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin: auto; }
.sif__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.sif__title { font-size: 15px; font-weight: 600; color: #1a1d23; }
.sif__metrics { display: flex; gap: 20px; flex-wrap: wrap; }
.sif__metric-item { text-align: right; }
.sif__metric-label { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8f9e; display: block; margin-bottom: 2px; }
.sif__metric-value { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: #1565c0; }
.sif__gauge-section { background: #f7f8fa; border-radius: 12px; padding: 24px 16px; margin-bottom: 20px; text-align: center; position: relative; }
.sif__gauge-container { position: relative; width: 240px; margin: 0 auto 8px; }
.sif__gauge-svg { width: 100%; display: block; }
.sif__gauge-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #c8e6c9; border: 1.5px solid #2e7d32; color: #1b5e20; font-size: 11px; font-weight: 700; padding: 3px 12px; border-radius: 20px; white-space: nowrap; letter-spacing: 0.03em; }
.sif__gauge-label { font-size: 11px; font-weight: 500; color: #8a8f9e; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 4px; }
.sif__gauge-value { font-family: var(--font-mono); font-size: 26px; font-weight: 600; color: #1a1d23; letter-spacing: -0.5px; margin-bottom: 16px; }
.sif__progress-container { max-width: 320px; margin: 0 auto; text-align: left; }
.sif__progress-texts { display: flex; justify-content: space-between; font-size: 12px; color: #5a5f6e; margin-bottom: 6px; font-weight: 500; }
.sif__progress-bar { height: 8px; background: #e2e4e9; border-radius: 4px; overflow: hidden; }
.sif__progress-fill { height: 100%; background: #4caf50; width: 0%; transition: width 0.8s cubic-bezier(.4,0,.2,1); }
.sif__chart-section { border: 1px solid #e2e4e9; border-radius: 12px; padding: 16px; margin-bottom: 0; }
.sif__chart-row { display: flex; align-items: center; margin-bottom: 10px; gap: 8px; }
.sif__bar-label { font-size: 11px; color: #5a5f6e; width: 110px; flex-shrink: 0; text-align: right; }
.sif__bar-track { flex: 1; height: 22px; background: #f0f1f4; border-radius: 4px; overflow: hidden; position: relative; }
.sif__bar-fill { height: 100%; border-radius: 4px; display: flex; align-items: center; justify-content: flex-end; padding-right: 8px; transition: width 0.5s cubic-bezier(.4,0,.2,1); min-width: 40px; }
.sif__bar-fill span { font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: #fff; white-space: nowrap; }
.sif__bar-desp { background: #c62828; }
.sif__bar-renda { background: #2e7d32; }
.sif__bar-passiva { background: #00897b; }
.sif__bar-juros { background: #1565c0; }
.sif__chart-axis { display: flex; justify-content: space-between; padding-left: 118px; margin-top: 8px; }
.sif__chart-axis span { font-size: 10px; color: #9aa0b0; font-family: var(--font-mono); }
.sif__controls { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.sif__control-row { display: flex; flex-direction: column; gap: 6px; }
.sif__control-row.sif__full { grid-column: 1 / -1; }
.sif__ctrl-top { display: flex; justify-content: space-between; align-items: center; }
.sif__ctrl-label { font-size: 12px; color: #5a5f6e; font-weight: 500; }
.sif__ctrl-val { font-family: var(--font-mono); font-size: 13px; font-weight: 500; color: #1a1d23; background: #f0f1f4; border: 1px solid #dde0e8; border-radius: 6px; padding: 2px 8px; min-width: 54px; text-align: center; }
.sif__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: #dde0e8; outline: none; cursor: pointer; }
.sif__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #1565c0; cursor: pointer; }
.sif__slider::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: #1565c0; cursor: pointer; }

/* =====================================================================
   5. SIMULADOR DCA (tema escuro)
   ===================================================================== */
.dca__wrap { font-family: var(--font-body); background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 22px; width: 100%; color: #fff; box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.dca__wrap * { box-sizing: border-box; margin: 0; padding: 0; }
.dca__ticker { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
.dca__ticker-left { display: flex; align-items: center; gap: 8px; }
.dca__ticker-icon { width: 28px; height: 28px; background: #F7931A; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 0.85rem; }
.dca__ticker-name { font-size: 13px; font-weight: 700; color: #fff; }
.dca__ticker-right { display: flex; align-items: center; gap: 10px; }
.dca__ticker-price-usd { 
  font-family: var(--font-mono); 
  font-size: 13px; 
  font-weight: 700; 
  color: #00ffae; 
  white-space: nowrap; 
}

.dca__ticker-price { 
  font-family: var(--font-mono); 
  font-size: 13px; 
  font-weight: 700; 
  color: #fff; 
  white-space: nowrap; 
}

/* Tratamento fino e elegante para telas Mobile */
@media (max-width: 480px) {
  .dca__ticker-price-usd,
  .dca__ticker-price {
    font-size: 11.5px;
  }
}
.dca__ticker-change { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; background: rgba(255,255,255,0.06); color: #888; }
.dca__ticker-change.up { background: rgba(0,255,174,0.12); color: #00ffae; }
.dca__ticker-change.down { background: rgba(255,77,109,0.12); color: #ff4d6d; }
.dca__header { margin-bottom: 16px; }
.dca__title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.dca__sub { font-size: 13px; color: #8a8f9e; }
.dca__controls { display: flex; flex-direction: column; gap: 12px; }
.dca__control-row { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.dca__ctrl-top { display: flex; justify-content: space-between; align-items: center; }
.dca__ctrl-label { font-size: 11px; color: #aaa; font-weight: 500; }
.dca__ctrl-val { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 2px 8px; }
.dca__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); outline: none; cursor: pointer; }
.dca__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #F7931A; cursor: pointer; }
.dca__slider::-moz-range-thumb { width: 14px; height: 14px; border: none; border-radius: 50%; background: #F7931A; cursor: pointer; }
.dca__input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-body);
  font-size: 12px;
  color: #fff;
  background: rgba(255,255,255,0.04);
  outline: none;
}
.dca__input:focus { border-color: #F7931A; }

/* Reseta a aparência nativa do <select> (iOS/Safari deixa o elemento
   mais alto/largo que um input comum, mesmo com a mesma classe). */
select.dca__input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* Altura fixa + line-height igual centraliza o texto sem depender
     do padding vertical, que o Safari iOS costuma ignorar/sobrescrever
     em <select>. Isso é o que resolve o "gordo/comprido" no iPhone real
     (o emulador de mobile do Chrome não reproduz esse comportamento). */
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  line-height: 38px;
  padding: 0 30px 0 10px;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%23F7931A' d='M6 8.4 1.2 3.6h9.6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px;
  cursor: pointer;
}
select.dca__input::-ms-expand { display: none; }
select.dca__input option { background: #111; color: #fff; }

/* NOVO: Reseta a aparência nativa de campos de data no iOS para 
   igualar a altura e largura com os campos de texto padrão */
input[type="date"].dca__input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  
  /* Força a mesma altura cravada do select e outros inputs */
  height: 38px;
  min-height: 38px;
  max-height: 38px;
  line-height: 38px;
  
  /* Garante que respeite a largura do container */
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}

/* Centraliza o texto nativo do iOS verticalmente */
input[type="date"].dca__input::-webkit-date-and-time-value {
  margin: 0;
  padding: 0;
  line-height: 38px;
}

/* Grid de 2 colunas (Data / Valor, De / Até).
   min-width:0 evita que os inputs (principalmente type="date")
   forcem a coluna a crescer além do espaço disponível. */
.dca__row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  min-width: 0;
}
.dca__row-2col .dca__control-row { min-width: 0; }
.dca__row-2col .dca__input { min-width: 0; }

.dca__btn { width: 100%; margin-top: 8px; background: #F7931A; color: white; border: none; padding: 11px; border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer; transition: background .2s, transform .15s; }
.dca__btn:hover { background: #e8860f; transform: translateY(-1px); }
.dca__btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.dca__loading { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 20px 0; font-size: 12px; color: #8a8f9e; }
.dca__spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,0.1); border-top-color: #F7931A; border-radius: 50%; animation: dca-spin 0.7s linear infinite; }
@keyframes dca-spin { to { transform: rotate(360deg); } }
.dca__results { margin-top: 18px; }
.dca__results-title { font-size: 12px; font-weight: 600; color: #ccc; margin-bottom: 10px; font-style: italic; }
.dca__result-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.dca__result-item { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 12px 8px; }
.dca__result-label { font-size: 8px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #888; margin-bottom: 6px; }
.dca__result-value { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #fff; }
.dca__result-value.positive { color: #4ade80; }
.dca__result-value.negative { color: #ff4d6d; }
.dca__result-sub { font-size: 10px; color: #666; margin-top: 3px; }
.dca__chart-box { border: 1px solid rgba(255,255,255,0.06); border-radius: 10px; padding: 10px; background: rgba(255,255,255,0.02); }
.dca__error { background: rgba(255,77,109,0.08); border: 1px solid rgba(255,77,109,0.2); border-radius: 8px; padding: 10px; color: #ff4d6d; font-size: 11px; text-align: center; margin-top: 12px; }
@media (max-width: 500px) { .dca__result-grid { grid-template-columns: 1fr 1fr; } }

/* Empilha "Data / Valor" e "De / Até" em telas de celular,
   evitando que os retângulos se sobreponham/espremam. */
@media (max-width: 480px) {
  .dca__row-2col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* =====================================================================
   6. MURAL DE SENTIMENTOS (tema escuro)
   ===================================================================== */
.mural__wrap { font-family: var(--font-body); background: #111; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 22px; color: #fff; }
.mural__wrap * { box-sizing: border-box; }
.mural__header { margin-bottom: 18px; }
.mural__title { font-size: 16px; font-weight: 700; color: #F7931A; margin-bottom: 3px; }
.mural__sub { font-size: 20px; font-weight: 700; color: #fff; text-align: center; line-height: 1.3; margin-top: 8px; }
.mural__form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.mural__input { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 9px 12px; color: #fff; font-size: 13px; font-family: var(--font-body); outline: none; transition: border-color .2s; }
.mural__input:focus { border-color: #F7931A; }
.mural__input::placeholder { color: #555; }
.mural__mood-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mural__mood-label { font-size: 11px; color: #888; font-weight: 500; }
.mural__moods { display: flex; gap: 6px; flex-wrap: wrap; }
.mural__mood-btn { background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.1); border-radius: 8px; padding: 5px 8px; font-size: 1.2rem; cursor: pointer; transition: all .2s; }
.mural__mood-btn:hover { border-color: #F7931A; transform: scale(1.1); }
.mural__mood-btn.selected { border-color: #F7931A; background: rgba(247,147,26,0.15); box-shadow: 0 0 8px rgba(247,147,26,0.3); }
.mural__textarea { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 10px 12px; color: #fff; font-size: 13px; font-family: var(--font-body); outline: none; resize: none; line-height: 1.5; transition: border-color .2s; }
.mural__textarea:focus { border-color: #F7931A; }
.mural__textarea::placeholder { color: #555; }
.mural__form-footer { display: flex; justify-content: space-between; align-items: center; }
.mural__char-count { font-size: 10px; color: #555; }
.mural__btn-post { background: #F7931A; color: #fff; border: none; padding: 9px 18px; border-radius: 8px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background .2s, transform .15s; font-family: var(--font-body); }
.mural__btn-post:hover { background: #e8860f; transform: translateY(-1px); }
.mural__error { background: rgba(255,77,109,0.1); border: 1px solid rgba(255,77,109,0.2); border-radius: 6px; padding: 8px 10px; color: #ff4d6d; font-size: 11px; }
.mural__feed { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding-right: 4px; }
.mural__feed::-webkit-scrollbar { width: 4px; }
.mural__feed::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 2px; }
.mural__feed::-webkit-scrollbar-thumb { background: rgba(247,147,26,0.3); border-radius: 2px; }
.mural__empty { text-align: center; color: #555; font-size: 12px; padding: 30px 0; }
.mural__card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 12px 14px; transition: border-color .2s; }
.mural__card:hover { border-color: rgba(247,147,26,0.2); }
.mural__card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; gap: 8px; }
.mural__card-left { display: flex; align-items: center; gap: 8px; }
.mural__card-mood { font-size: 1.4rem; line-height: 1; }
.mural__card-apelido { font-size: 13px; font-weight: 700; color: #F7931A; }
.mural__card-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mural__card-dateline { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.mural__card-date { font-size: 10px; color: #555; white-space: nowrap; }
.mural__card-btc { font-size: 10px; color: #00ffae; font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.mural__card-texto { font-size: 12px; color: #ccc; line-height: 1.6; word-break: break-word; }
.mural__card-actions { margin-top: 8px; display: flex; justify-content: flex-end; }
.mural__btn-edit { background: none; border: 1px solid rgba(255,255,255,0.1); border-radius: 5px; color: #666; font-size: 10px; padding: 3px 8px; cursor: pointer; transition: all .2s; font-family: var(--font-body); }
.mural__btn-edit:hover { border-color: #F7931A; color: #F7931A; }
.mural__edit-area { width: 100%; background: rgba(255,255,255,0.05); border: 1px solid #F7931A; border-radius: 6px; padding: 8px; color: #fff; font-size: 12px; font-family: var(--font-body); resize: none; outline: none; margin-top: 6px; }
.mural__edit-actions { display: flex; gap: 6px; margin-top: 6px; justify-content: flex-end; }
.mural__btn-save { background: #F7931A; color: #fff; border: none; border-radius: 5px; padding: 4px 10px; font-size: 10px; font-weight: 700; cursor: pointer; font-family: var(--font-body); }
.mural__btn-cancel { background: none; border: 1px solid rgba(255,255,255,0.15); color: #888; border-radius: 5px; padding: 4px 10px; font-size: 10px; cursor: pointer; font-family: var(--font-body); }
.mural__edit-note { font-size: 9px; color: #555; margin-top: 4px; text-align: right; font-style: italic; }
.mural__toggle-btn { width: 100%; margin-top: 4px; background: none; border: 1px solid rgba(247,147,26,0.25); border-radius: 8px; color: #F7931A; font-size: 12px; font-weight: 600; padding: 8px; cursor: pointer; font-family: var(--font-body); transition: background .2s, border-color .2s; letter-spacing: 0.02em; }
.mural__toggle-btn:hover { background: rgba(247,147,26,0.08); border-color: #F7931A; }

/* =====================================================================
   7. HALVING WIDGET (tema escuro)
   ===================================================================== */
.halv__wrap { font-family:var(--font-body); background:#111; border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px; color:#fff; box-shadow:0 4px 16px rgba(0,0,0,.3); }
.halv__wrap * { box-sizing:border-box; margin:0; padding:0; }
.halv__header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.halv__icon { width:28px; height:28px; background:#F7931A; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:900; font-size:1rem; flex-shrink:0; }
.halv__title { font-size:14px; font-weight:700; color:#fff; }
.halv__sub { font-size:11px; color:#ccc; }
.halv__live-dot { width:6px; height:6px; border-radius:50%; background:#F7931A; margin-left:auto; animation:pulse 1.4s infinite; }

.halv__countdown-box { background:rgba(247,147,26,.06); border:1px solid rgba(247,147,26,.15); border-radius:8px; padding:10px 12px; margin-bottom:10px; }
.halv__next-label { font-size:11px; color:#ccc; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.halv__next-label strong { color:#F7931A; }

.halv__clock { display:flex; align-items:flex-end; justify-content:center; gap:2px; margin-bottom:8px; }
.halv__unit { display:flex; flex-direction:column; align-items:center; gap:2px; }
.halv__num { font-family:var(--font-mono); font-size:18px; font-weight:700; color:#F7931A; line-height:1; }
.halv__num--days { font-size:32px; color:#F7931A; }
.halv__ulab { font-size:9px; color:#ccc; text-transform:uppercase; letter-spacing:.05em; }
.halv__sep { font-size:16px; color:rgba(247,147,26,.3); font-weight:700; line-height:1.3; padding:0 2px 4px; }
.halv__sep--days { font-size:24px; padding:0 3px 8px; }

.halv__blocks-row { display:flex; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:6px; overflow:hidden; margin-bottom:6px; }
.halv__block-item { flex:1; padding:8px 6px; display:flex; flex-direction:column; align-items:center; gap:2px; }
.halv__block-divider { width:1px; background:rgba(255,255,255,.07); flex-shrink:0; }
.halv__block-label { font-size:9px; color:#ccc; text-transform:uppercase; letter-spacing:.05em; text-align:center; }
.halv__block-val { font-family:var(--font-mono); font-size:14px; font-weight:700; color:#fff; }
.halv__est-date { font-size:10px; color:#ccc; text-align:center; font-style:italic; margin-top:4px; }
.halv__est-inline { text-transform:none; letter-spacing:normal; font-style:normal; color:#F7931A; opacity:.75; font-size:10px; font-weight:400; }

.halv__tabs { display:flex; gap:4px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.07); padding-bottom:6px; }
.halv__tab { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:4px; color:#ccc; font-size:12px; font-weight:600; padding:4px 10px; cursor:pointer; font-family:var(--font-body); transition:all .2s; }
.halv__tab:hover, .halv__tab.active { border-color:#F7931A; color:#F7931A; background:rgba(247,147,26,.12); }

.halv__card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); border-radius:8px; padding:10px; }
.halv__card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.halv__card-label { font-size:12px; font-weight:700; color:#ccc; }
.halv__card-block { font-size:10px; color:#ccc; font-family:var(--font-mono); }

.halv__reward-row { display:flex; align-items:center; gap:6px; flex-wrap:wrap; background:rgba(255,255,255,.03); border-radius:6px; padding:8px; margin-bottom:8px; }
.halv__reward-item { display:flex; flex-direction:column; gap:2px; }
.halv__reward-label { font-size:9px; color:#ccc; text-transform:uppercase; letter-spacing:.05em; }
.halv__reward-val { font-family:var(--font-mono); font-size:14px; font-weight:700; color:#fff; }
.halv__reward-arrow { color:#F7931A; font-size:14px; font-weight:700; }
.halv__reward-div { width:1px; height:24px; background:rgba(255,255,255,.08); margin:0 4px; }

.halv__stats-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; margin-bottom:6px; }
.halv__stat-item { background:rgba(255,255,255,.03); border-radius:6px; padding:8px; display:flex; flex-direction:column; gap:2px; }
.halv__stat-label { font-size:9px; color:#ccc; text-transform:uppercase; letter-spacing:.05em; }
.halv__stat-val { font-family:var(--font-mono); font-size:16px; font-weight:700; }
.halv__stat-sub { font-size:10px; color:#ccc; }
.halv__ongoing .halv__stat-val { font-size:14px; color:#F7931A; }

.halv__green { color:#4ade80; }
.halv__red   { color:#ff4d6d; }
.halv__orange { color:#F7931A; }

.halv__projected-badge { background:rgba(247,147,26,.15); border:1px solid rgba(247,147,26,.3); border-radius:6px; padding:6px 10px; font-size:11px; font-weight:700; color:#F7931A; text-align:center; margin-bottom:8px; letter-spacing:.04em; }
.halv__status-bar { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:6px; padding:8px 10px; margin-bottom:8px; font-size:12px; color:#ccc; flex-wrap:wrap; }
.halv__status-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.halv__status-dot--bear { background:#ef4444; animation:pulse 1.4s infinite; }
.halv__faltam-badge { margin-left:auto; background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.25); border-radius:4px; padding:3px 8px; font-size:11px; color:#fca5a5; }
.halv__faltam-detalhe { display:block; font-size:9px; font-weight:400; color:#fca5a5; opacity:.65; margin-top:2px; }

.halv__buy-alert { display:flex; align-items:center; gap:10px; background:rgba(74,222,128,.12); border:1.5px solid rgba(74,222,128,.4); border-radius:8px; padding:10px 12px; margin-top:8px; animation:halvBuyAlertPulse 1.8s ease-in-out infinite; }
.halv__buy-alert-icon { font-size:20px; flex-shrink:0; line-height:1; }
.halv__buy-alert-text { font-size:11px; color:#bbf7d0; line-height:1.4; }
.halv__buy-alert-text strong { color:#4ade80; font-size:12px; display:block; margin-bottom:2px; }
@keyframes halvBuyAlertPulse { 0%,100% { box-shadow:0 0 0 0 rgba(74,222,128,.35); } 50% { box-shadow:0 0 0 6px rgba(74,222,128,0); } }
.halv__buy-soon { display:flex; align-items:center; gap:8px; background:rgba(247,147,26,.08); border:1px solid rgba(247,147,26,.25); border-radius:8px; padding:9px 12px; margin-top:8px; font-size:11px; color:#ffd9a8; }
.halv__buy-soon strong { color:#F7931A; }

/* =====================================================================
   WIDGET ETF SOSOVALUE
   ===================================================================== */
.etf-widget {
    max-width: 1200px;
    margin: 0 auto;
}
.etf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 18px;
}
.etf-title {
    margin: 0;
    color: #fff;
    font-size: 16px;
    white-space: nowrap;
}
.etf-stats-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-right: auto;
    margin-left: 24px;
}
.etf-stat-chip {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.etf-stat-chip-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
}
.etf-stat-chip-val {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.etf-filtros {
    display: flex;
    gap: 8px;
}
.btn-periodo {
    background: #111;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-periodo:hover {
    background: #222;
}
.btn-periodo.ativo {
    color: var(--btc-orange);
    border-color: var(--btc-orange);
}
.etf-canvas-container {
    position: relative;
    height: 460px;
    width: 100%;
}
.etf-stat-chip-val.halv__green { color: #4ade80; }
.etf-stat-chip-val.halv__red { color: #ff4d6d; }
/* =====================================================================
   BASE DE CUSTO DO BITCOIN
   ===================================================================== */
.costbasis-widget {
  width:100%;
  max-width:none;
  margin:0;
}
.costbasis-header { display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; margin-bottom:16px; }
.costbasis-title { margin:0 0 3px; color:#fff; font-size:16px; }
.costbasis-subtitle { margin:0; color:#8d939d; font-size:11px; }
.costbasis-values { display:flex; flex-wrap:wrap; gap:18px; margin-right:auto; }
.costbasis-values span { display:flex; flex-direction:column; gap:3px; }
.costbasis-values small { color:#8d939d; font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.costbasis-values strong { color:#fff; font-family:var(--font-mono); font-size:14px; }
.costbasis-values span:first-child strong { color:#a28dff; }
.costbasis-values span:last-child strong { color:#38d996; }
.costbasis-filters { display:flex; gap:6px; }
.costbasis-filters button { background:#111; color:#ddd; border:1px solid rgba(255,255,255,.1); padding:5px 9px; border-radius:6px; cursor:pointer; font-size:11px; }
.costbasis-filters button:hover { background:#222; }
.costbasis-filters button.active { color:var(--btc-orange); border-color:var(--btc-orange); }
.costbasis-chart-wrap { position:relative; width:calc(100% + 8px); margin-right:-8px; height:430px; }
.costbasis-note { margin:10px 0 0; color:#777; font-size:12px; line-height:1.5; }
.costbasis-note a { color:#aaa; text-decoration:underline; }
.costbasis-error { color:#ffb4c0; padding:24px; text-align:center; }
@media (max-width:700px) {
  .costbasis-header { align-items:flex-start; }
  .costbasis-values { order:3; width:100%; justify-content:space-between; }
  .costbasis-chart-wrap { height:330px; }
}

/* =====================================================================
   NUPL — LUCRO/PREJUÍZO NÃO REALIZADO
   ===================================================================== */
.nupl-widget { width:100%; max-width:none; margin:0; }
.nupl-header { display:flex; align-items:center; flex-wrap:wrap; gap:14px 24px; margin-bottom:16px; }
.nupl-title { margin:0 0 3px; color:#fff; font-size:16px; }
.nupl-subtitle { margin:0; color:#8d939d; font-size:11px; }
.nupl-values { display:flex; flex-wrap:wrap; gap:18px; margin-right:auto; }
.nupl-values span { display:flex; flex-direction:column; gap:3px; }
.nupl-values small { color:#8d939d; font-size:9px; text-transform:uppercase; letter-spacing:.05em; }
.nupl-values strong { color:#fff; font-family:var(--font-mono); font-size:14px; }
.nupl-values span:nth-child(3) strong { color:#c7cbd3; }
.nupl-filters { display:flex; gap:6px; }
.nupl-filters button {
  background:#111;
  color:#ddd;
  border:1px solid rgba(255,255,255,.1);
  padding:5px 9px;
  border-radius:6px;
  cursor:pointer;
  font-size:11px;
}
.nupl-filters button:hover { background:#222; }
.nupl-filters button.active { color:var(--btc-orange); border-color:var(--btc-orange); }
.nupl-chart-wrap {
  position:relative;
  width:calc(100% + 8px);
  margin-right:-8px;
  height:430px;
}
.nupl-note { margin:10px 0 0; color:#777; font-size:12px; line-height:1.5; }
.nupl-note a { color:#aaa; text-decoration:underline; }
.nupl-error { width:100%; max-width:none; color:#ffb4c0; padding:24px; text-align:center; }
@media (max-width:700px) {
  .nupl-header { align-items:flex-start; }
  .nupl-values { order:3; width:100%; justify-content:space-between; }
  .nupl-chart-wrap { height:330px; }
}


/* =====================================================================
   8. CONVERSOR DE BITCOIN (Estilo Preev Minimalista)
   ===================================================================== */
.preev__container {
  background: #bbbbbb;
  border-radius: 20px;
  padding: 50px 40px;
  margin: 40px auto;
  width: 100%;
  max-width: 1200px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  font-family: var(--font-body);
}

.preev__container::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: radial-gradient(#d5d7dc 1.2px, transparent 0);
  background-size: 26px 26px;
  pointer-events: none;
  opacity: 0.6;
  z-index: 0;
}

.preev__live-badge {
  position: absolute;
  top: 22px;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}
.preev__live-text {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #666;
  text-transform: uppercase;
}
.preev__live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #999;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.preev__live-dot.live {
  background: #10b981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.55);
  animation: preevLivePulse 1.7s infinite;
}
.preev__live-dot.offline {
  background: #f43f5e;
  box-shadow: none;
  animation: none;
}
@keyframes preevLivePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.6; }
}

.preev__title {
  text-align: center;
  font-size: clamp(20px, 4vw, 28px); /* Tamanho responsivo para não quebrar em textos longos */
  font-weight: 600;
  color: var(--black);
  margin-bottom: 40px;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
  padding: 0 10px;
  line-height: 1.2;
}

.preev__inputs-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  margin-bottom: 50px;
  flex-wrap: nowrap;
}

.preev__box {
  background: #ffffff;
  border: 1px solid #dcdfe6;
  border-radius: 8px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.01);
  transition: border-color 0.2s ease;
  color: var(--black);
}

.preev__val {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 400;
  text-align: center;
  outline: none;
  padding: 0 6px;
  letter-spacing: -0.02em;
}
.preev__val:focus { border-color: #a0a5b1; }

.preev__lbl, .select-asset {
  width: 90px;
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: clamp(18px, 2.5vw, 28px);
  font-weight: 700;
  user-select: none;
}

.select-asset {
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-align: center;
  text-align-last: center; 
}
.select-asset:focus { border-color: #a0a5b1; }

.preev__vertical-divider {
  width: 4px;
  height: 40px;
  background: #e2e4e9;
  border-radius: 4px;
  margin: 0 8px;
}

.preev__chart-wrap {
  width: 100%;
  height: 180px;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: 12px;
  padding: 12px;
  box-sizing: border-box;
}
.preev__chart-type {
  position:absolute;
  bottom:10px;
  left:50%;
  z-index:3;
  transform:translateX(-50%);
  display:flex;
  padding:2px;
  gap:2px;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:7px;
  background:rgba(255,255,255,0.9);
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.preev__chart-type-btn {
  border:0;
  border-radius:5px;
  padding:5px 8px;
  background:transparent;
  color:#777;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
}
.preev__chart-type-btn:hover { color:#222; }
.preev__chart-type-btn.active { background:#252525; color:#fff; }
.preev__chart-wrap canvas { width: 100% !important; height: 100% !important; display: block; cursor: crosshair; }

.preev__chart-tooltip {
  position: absolute;
  top: 10px;
  left: 10px;
  background: transparent;
  color: #111111;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 2px 0;
  border-radius: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.1s ease;
  z-index: 5;
}
.preev__chart-tooltip.visible { opacity: 1; }
.preev__chart-tooltip .ohlc-label { color: #111111; margin-right: 3px; }
.preev__chart-tooltip .ohlc-value { margin-right: 8px; }
.preev__chart-tooltip .ohlc-value:last-child { margin-right: 0; }
.preev__chart-tooltip .up { color: #16a56a; }
.preev__chart-tooltip .down { color: #ef5b62; }
.preev__chart-date {
  position:absolute;
  bottom:38px;
  left:50%;
  transform:translateX(-50%);
  padding:3px 6px;
  border-radius:4px;
  background:rgba(255,255,255,0.92);
  color:#333;
  font-family:var(--font-body);
  font-size:9px;
  font-weight:700;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.1s ease;
  z-index:5;
}
.preev__chart-date.visible { opacity:1; }

.preev__footer { display: flex; justify-content: center; position: relative; z-index: 1; }
.preev__footer-content {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  background: transparent;
  padding: 0;
}

.preev__tf-group { display: flex; gap: 2px; }
.preev__tf-btn {
  background: transparent; border: none; font-family: inherit; font-size: 15px;
  font-weight: 700; color: var(--gray-500); padding: 6px 12px; border-radius: 6px;
  cursor: pointer; transition: all 0.2s;
}
.preev__tf-btn:hover { color: var(--black); }
.preev__tf-btn.active { background: #888888; color: #ffffff; }

.preev__footer-separator { width: 4px; height: 4px; background: #ccc; border-radius: 50%; }
.preev__stat-item { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: var(--gray-700); }
.preev__stat-item.up { color: #10b981; }
.preev__stat-item.down { color: #f43f5e; }

/* Remove spinners */
.preev__val::-webkit-outer-spin-button,
.preev__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.preev__val { -moz-appearance: textfield; }

@media (max-width: 820px) {
  .preev__container { padding: 40px 15px; }
  .preev__inputs-row { gap: 8px; }
  .preev__val { flex: 1; font-size: 24px; height: 70px; }
  .preev__lbl { width: 80px; font-size: 22px; height: 70px; }
  .preev__vertical-divider { display: none; }
}
@media (max-width: 480px) {
  .preev__inputs-row { flex-wrap: wrap; }
  .preev__val { flex: 1 1 55%; height: 60px; font-size: 22px; }
  .preev__lbl { width: 38%; height: 60px; font-size: 20px; }
  .preev__live-badge { top: 14px; right: 14px; }
  .preev__live-text { display: none; }
}

/* =====================================================================
   9. STRATEGY — TESOURARIA BITCOIN
   ===================================================================== */
.strategy__card {
  --strategy-orange: #f7931a;
  --strategy-green: #4ade80;
  --strategy-red: #ff4d6d;
  background: #101112;
  color: #f5f5f5;
  border: 1px solid rgba(247,147,26,0.28);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.22);
  overflow: hidden;
}
.strategy__header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:6px; }
.strategy__eyebrow { color:var(--strategy-orange); font-size:10px; font-weight:800; letter-spacing:.12em; margin-bottom:5px; }
.strategy__title { color:#fff; font-size:clamp(20px,2.3vw,28px); line-height:1.1; margin:0 0 3px; }
.strategy__subtitle { color:#9da2ad; font-size:13px; margin:0; }
.strategy__status { display:flex; align-items:center; gap:7px; color:#8d929d; font-size:10px; font-weight:800; letter-spacing:.08em; white-space:nowrap; }
.strategy__status-dot { width:8px; height:8px; border-radius:50%; background:#8d929d; }
.strategy--ready .strategy__status-dot { background:var(--strategy-green); box-shadow:0 0 9px rgba(74,222,128,.55); }
.strategy__warning { background:rgba(247,147,26,.08); border-left:3px solid var(--strategy-orange); border-radius:0 8px 8px 0; color:#c9cbd1; font-size:12px; padding:5px 8px; margin-bottom:7px; }
.strategy__warning strong { color:#fff; }
.strategy__metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin-bottom:7px; }
.strategy__metric { background:#181a1d; border:1px solid #292c31; border-radius:11px; padding:8px 10px; min-width:0; }
.strategy__metric--accent { border-color:rgba(247,147,26,.5); background:linear-gradient(145deg,rgba(247,147,26,.13),#181a1d 65%); }
.strategy__metric span { display:block; color:#8f95a1; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; margin-bottom:2px; }
.strategy__metric strong { display:block; color:#fff; font-family:var(--font-mono); font-size:clamp(18px,2vw,23px); line-height:1.1; white-space:nowrap; }
.strategy__metric--accent strong { color:var(--strategy-orange); }
.strategy__metric small { display:block; color:#737985; font-size:10px; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.strategy__layout { display:block; }
.strategy__chart-card, .strategy__purchase-card { background:#16181b; border:1px solid #292c31; border-radius:12px; }
.strategy__chart-card { padding:9px; min-width:0; }
.strategy__chart-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:4px; }
.strategy__chart-head h3 { color:#fff; font-size:14px; margin:0 0 3px; }
.strategy__chart-head p { color:#777d88; font-size:10px; margin:0; }
.strategy__tf-group { display:flex; gap:2px; flex-shrink:0; background:#0f1012; border-radius:7px; padding:3px; }
.strategy__tf { border:0; background:transparent; color:#7f8590; font:700 11px var(--font-body); padding:5px 8px; border-radius:5px; cursor:pointer; }
.strategy__tf:hover { color:#fff; }
.strategy__tf.active { background:var(--strategy-orange); color:#111; }
.strategy__chart-wrap { height:170px; position:relative; }
.strategy__chart-wrap canvas { width:100%!important; height:100%!important; }
.strategy__chart-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:5px; }
.strategy__chart-stats span { background:#101214; border-radius:7px; color:#7d838e; font-size:9px; padding:5px; text-align:center; text-transform:uppercase; }
.strategy__chart-stats strong { display:block; color:#e9eaed; font:800 14px var(--font-mono); margin-top:3px; text-align:center; text-transform:none; }
.strategy__positive { color:var(--strategy-green)!important; }
.strategy__negative { color:var(--strategy-red)!important; }
.strategy__availability { min-height:0; color:#777d88; font-size:9px; margin-top:4px; }
.strategy__mnav-guide { display:grid; gap:3px; margin:0; padding:6px 9px; background:#101214; border:1px solid #25282e; border-radius:8px; }
.strategy__mnav-guide div { display:flex; align-items:baseline; gap:9px; min-width:0; }
.strategy__mnav-guide strong { flex:0 0 68px; font:800 10px var(--font-mono); }
.strategy__mnav-guide span { color:#9aa0aa; font-size:10px; line-height:1.25; }
.strategy__mnav-neutral { color:#e7e9ed; }
.strategy__mnav-premium { color:#4ade80; }
.strategy__mnav-discount { color:#ff6b84; }
.strategy__purchase-card { padding:8px 10px; }
.strategy__purchase-card--horizontal { display:grid; grid-template-columns:minmax(165px,.5fr) minmax(330px,1fr) minmax(400px,1.3fr) minmax(145px,.5fr) auto; grid-template-areas:"intro main guide metrics source"; align-items:center; gap:8px; margin-bottom:7px; }
.strategy__purchase-card--horizontal .strategy__section-label { margin-bottom:5px; }
.strategy__section-label { color:var(--strategy-orange); font-size:9px; font-weight:800; letter-spacing:.09em; margin-bottom:9px; }
.strategy__purchase-date { color:#878d98; font-size:11px; }
.strategy__purchase-main { display:flex; align-items:center; gap:10px; margin:4px 0 12px; min-width:0; background:#101214; border-radius:7px; padding:6px 9px; }
.strategy__purchase-intro { grid-area:intro; }
.strategy__purchase-guide { grid-area:guide; min-width:0; }
.strategy__purchase-card--horizontal .strategy__purchase-main { grid-area:main; margin:0; justify-content:space-between; }
.strategy__purchase-btc { display:flex; align-items:baseline; gap:5px; white-space:nowrap; }
.strategy__purchase-btc strong { color:#fff; font:800 24px var(--font-mono); }
.strategy__purchase-btc span { color:var(--strategy-orange); font-size:12px; font-weight:800; }
.strategy__purchase-detail { min-width:88px; padding-left:9px; border-left:1px solid #292c31; }
.strategy__purchase-detail span { display:block; color:#777d88; font-size:8px; margin-bottom:3px; white-space:nowrap; }
.strategy__purchase-detail strong { display:block; color:#e9eaed; font:700 12px var(--font-mono); white-space:nowrap; }
.strategy__purchase-grid { grid-area:metrics; display:grid; grid-template-columns:minmax(140px,1fr); gap:8px; }
.strategy__purchase-grid div { background:#101214; border-radius:7px; padding:8px; }
.strategy__purchase-grid .strategy__purchase-usd-reserve { background:linear-gradient(135deg,rgba(255,145,0,.11),#16181b 72%); border:1px solid rgba(255,145,0,.62); }
.strategy__purchase-grid .strategy__purchase-usd-reserve strong { color:var(--strategy-orange); }
.strategy__purchase-grid span { display:block; color:#777d88; font-size:9px; margin-bottom:3px; }
.strategy__purchase-grid strong { color:#e9eaed; font:700 12px var(--font-mono); }
.strategy__purchase-grid .strategy__purchase-usd-reserve strong { font-size:clamp(18px,2.1vw,25px); line-height:1.1; }
.strategy__source-link { display:inline-block; color:#aab0bb; font-size:10px; margin-top:11px; text-decoration:none; }
.strategy__source-link:hover { color:var(--strategy-orange); }
.strategy__purchase-card--horizontal .strategy__source-link { grid-area:source; margin:0; white-space:nowrap; }
.strategy__footer { display:flex; justify-content:space-between; gap:12px; color:#6f7580; font-size:9px; margin-top:11px; }
.strategy__footer a { color:#999faa; }
.strategy__error { background:rgba(255,77,109,.1); border:1px solid rgba(255,77,109,.35); border-radius:8px; color:#ff8ba1; font-size:11px; padding:9px 11px; margin-top:10px; }
.strategy--loading-chart .strategy__chart-wrap { opacity:.45; }

@media (max-width:1300px) {
  .strategy__metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .strategy__purchase-card--horizontal { grid-template-columns:minmax(150px,.45fr) minmax(310px,.9fr) minmax(340px,1.3fr); grid-template-areas:"intro main guide" "metrics metrics metrics" "source source source"; }
  .strategy__purchase-card--horizontal .strategy__purchase-main { justify-content:flex-end; }
  .strategy__chart-wrap { height:165px; }
}
@media (max-width:600px) {
  .strategy__card { padding:10px; border-radius:13px; }
  .strategy__header { flex-direction:column; gap:8px; }
  .strategy__metrics { grid-template-columns:1fr 1fr; gap:7px; }
  .strategy__metric { padding:11px 9px; }
  .strategy__metric strong { font-size:17px; }
  .strategy__purchase-grid .strategy__purchase-usd-reserve strong { font-size:17px; }
  .strategy__metric small { font-size:8px; }
  .strategy__chart-head { flex-direction:column; }
  .strategy__tf-group { width:100%; }
  .strategy__tf { flex:1; padding:6px 4px; }
  .strategy__chart-wrap { height:150px; }
  .strategy__chart-stats { grid-template-columns:1fr 1fr; }
  .strategy__purchase-card--horizontal { grid-template-columns:1fr; grid-template-areas:"intro" "main" "guide" "metrics" "source"; }
  .strategy__purchase-grid { grid-template-columns:1fr; }
  .strategy__purchase-card--horizontal .strategy__purchase-main { justify-content:flex-start; }
  .strategy__footer { flex-direction:column; }
}
/* Últimos movimentos — compra e venda empilhadas, sem alterar o gráfico. */
.strategy__purchase-card--horizontal {
  grid-template-columns:minmax(0,1.45fr) minmax(340px,1.1fr) minmax(150px,.38fr) auto;
  grid-template-areas:"movements guide metrics source";
}
.strategy__movements { grid-area:movements; display:grid; gap:6px; min-width:0; }
.strategy__movement {
  min-width:0;
  display:grid;
  grid-template-columns:172px minmax(0,1fr);
  align-items:center;
  gap:8px;
  border:1px solid #292c31;
  border-radius:8px;
  padding:6px 8px;
}
.strategy__movement--buy, .strategy__movement--sale { grid-area:auto; }
.strategy__movement--buy {
  border-color:rgba(74,222,128,.42);
  background:linear-gradient(105deg, rgba(74,222,128,.15) 0%, rgba(74,222,128,.06) 48%, #16181b 100%);
}
.strategy__movement--sale {
  border-color:rgba(255,77,109,.52);
  background:linear-gradient(105deg, rgba(255,77,109,.20) 0%, rgba(255,77,109,.08) 48%, #16181b 100%);
}
.strategy__purchase-card--horizontal .strategy__movement .strategy__purchase-main {
  grid-area:auto;
  margin:0;
  justify-content:space-between;
}
.strategy__movement .strategy__purchase-intro { grid-area:auto; }
.strategy__sale-label { color:var(--strategy-orange); }
.strategy__sale-main { border:0; }
@media (max-width:1200px) {
  .strategy__purchase-card--horizontal {
    grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
    grid-template-areas:"movements guide" "metrics source";
  }
}
@media (max-width:700px) {
  .strategy__purchase-card--horizontal {
    grid-template-columns:1fr;
    grid-template-areas:"movements" "guide" "metrics" "source";
  }
  .strategy__movement { grid-template-columns:1fr; }
  .strategy__purchase-card--horizontal .strategy__movement .strategy__purchase-main { flex-wrap:wrap; gap:7px; }
  .strategy__movement .strategy__purchase-btc { flex-basis:100%; }
  .strategy__movement .strategy__purchase-detail { flex:1 1 120px; padding-left:7px; }
}
/* Ferramentas de desenho do Conversor */
.preev__draw-control{position:absolute;bottom:10px;left:10px;z-index:4}
.preev__draw-control>.preev__chart-type-btn{background:rgba(255,255,255,.94);box-shadow:0 2px 8px rgba(0,0,0,.08)}
.preev__draw-control>.preev__chart-type-btn.active{background:#252525;color:#fff}
.preev__draw-options{position:absolute;bottom:30px;left:0;display:flex;gap:3px;padding:3px;border:1px solid rgba(0,0,0,.14);border-radius:7px;background:rgba(255,255,255,.97);box-shadow:0 3px 12px rgba(0,0,0,.14)}
.preev__draw-options[hidden]{display:none}
.preev__draw-options button{border:0;border-radius:4px;padding:5px 8px;background:transparent;color:#555;font-size:10px;font-weight:700;cursor:pointer}
.preev__draw-options button[aria-checked="true"]{background:#252525;color:#fff}