@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&family=Inter:wght@400;600&display=swap');

:root{
  --bg1:#020617;
  --bg2:#000814;
  --cyan:#22d3ee;
  --cyan2:#38bdf8;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --border:rgba(34,211,238,.22);
  --glow:rgba(34,211,238,.18);

  --panel: rgba(2,6,23,.55);
  --panel2: rgba(11,18,36,.92);
  --stroke: rgba(34,211,238,.16);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background: radial-gradient(circle at top, var(--bg1), var(--bg2));
  color:var(--text);
  font-family: Inter, system-ui, sans-serif;
}

.container{
  width: 440px;
  padding: 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--panel2), rgba(2,6,23,.86));
  border: 1px solid var(--border);
  box-shadow: 0 0 40px var(--glow), inset 0 0 24px rgba(34,211,238,.06);
}

h1{
  margin: 4px 0 18px;
  text-align:center;
  font-family: Orbitron, sans-serif;
  letter-spacing: .8px;
  color: var(--cyan);
  font-size: 20px;
}

/* STATUS */
.status{
  display:flex;
  align-items:center;
  gap:10px;
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.scan-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
  animation: pulse 1.2s infinite;
}

@keyframes pulse{
  0%{ transform:scale(.85); opacity:.45; }
  50%{ transform:scale(1.1); opacity:1; }
  100%{ transform:scale(.85); opacity:.45; }
}

.last-scan{
  color: rgba(148,163,184,.9);
}

/* TIMER (segundos em destaque) */
.timer{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:10px;
  padding: 14px 12px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 0 16px rgba(34,211,238,.10);
  margin-bottom: 10px;
}

.timer-label{
  font-family: Orbitron, sans-serif;
  font-size: 12px;
  color: rgba(148,163,184,.95);
}

.countdown{
  font-family: Orbitron, sans-serif;
  font-size: 44px;
  line-height: 1;
  color: var(--cyan);
  text-shadow: 0 0 18px rgba(34,211,238,.35);
  letter-spacing: 1px;
  min-width: 70px;
  text-align: right;
}

.timer-suffix{
  font-family: Orbitron, sans-serif;
  font-size: 14px;
  color: rgba(148,163,184,.95);
}

/* “Reload” visual */
.scanbar{
  height: 8px;
  border-radius: 999px;
  background: rgba(148,163,184,.15);
  border: 1px solid rgba(34,211,238,.12);
  overflow:hidden;
  margin-bottom: 14px;
}

.scanbar-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(34,211,238,.15), rgba(34,211,238,.85), rgba(34,211,238,.15));
  box-shadow: 0 0 18px rgba(34,211,238,.28);
  transition: width .2s linear;
}

/* BOTÃO */
button{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(34,211,238,.35);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(34,211,238,.95), rgba(56,189,248,.85));
  color: #04101a;
  font-weight: 800;
  font-family: Orbitron, sans-serif;
  letter-spacing: .7px;
  cursor: pointer;
  box-shadow: 0 0 22px rgba(34,211,238,.18);
  transition: transform .12s ease, filter .12s ease;
}

button:hover{ transform: translateY(-1px); filter: brightness(1.03); }
button:active{ transform: translateY(0px); }
button:disabled{ opacity:.65; cursor:not-allowed; }

.hidden{ display:none; }

/* LOADER */
#loading{
  margin-top: 14px;
  text-align:center;
  color: var(--muted);
  font-size: 12.5px;
}

.spinner{
  width: 34px;
  height: 34px;
  margin: 10px auto 6px;
  border-radius: 50%;
  border: 3px solid rgba(34,211,238,.25);
  border-top-color: var(--cyan);
  animation: spin .9s linear infinite;
  box-shadow: 0 0 14px rgba(34,211,238,.20);
}

@keyframes spin{
  to { transform: rotate(360deg); }
}

/* RESULTADO — MAIS VISÍVEL */
#result{
  margin-top: 14px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(2,6,23,.62);
  border: 1px solid var(--stroke);
  box-shadow: inset 0 0 18px rgba(34,211,238,.08);
}

#result h2{
  margin: 0 0 12px;
  font-family: Orbitron, sans-serif;
  color: var(--cyan2);
  font-size: 14px;
  letter-spacing: .6px;
}

#result p{
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(11,18,36,.55);
  border: 1px solid rgba(34,211,238,.10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

#result strong{
  color: rgba(148,163,184,.95);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
}

#result span{
  font-size: 14px;
  color: rgba(229,231,235,.95);
}

/* Destaques principais */
#asset, #order, #time{
  font-family: Orbitron, sans-serif;
  font-size: 18px;
  letter-spacing: .8px;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(34,211,238,.30);
}

#score{
  font-family: Orbitron, sans-serif;
  font-size: 20px;
  color: #eaffff;
  text-shadow: 0 0 16px rgba(34,211,238,.35);
}

#rsi, #ema{
  font-family: Orbitron, sans-serif;
  font-size: 15px;
  color: rgba(229,231,235,.92);
  text-shadow: 0 0 10px rgba(34,211,238,.18);
}

/* ===== ORDEM: cores + fundo do card ===== */
.order-buy{
  color:#00ff9c !important;
  text-shadow:0 0 14px rgba(0,255,156,.60);
}
.order-sell{
  color:#ff4d6d !important;
  text-shadow:0 0 14px rgba(255,77,109,.60);
}
.order-neutral{
  color:#9aa4b2 !important;
  text-shadow:none;
}

/* Fundo suave no card da Ordem */
.order-card-buy{
  background: rgba(0,255,156,.08) !important;
  border-color: rgba(0,255,156,.20) !important;
  box-shadow: 0 0 0 1px rgba(0,255,156,.10), inset 0 0 16px rgba(0,255,156,.08);
}
.order-card-sell{
  background: rgba(255,77,109,.08) !important;
  border-color: rgba(255,77,109,.22) !important;
  box-shadow: 0 0 0 1px rgba(255,77,109,.10), inset 0 0 16px rgba(255,77,109,.08);
}
.order-card-neutral{
  background: rgba(148,163,184,.10) !important;
  border-color: rgba(148,163,184,.18) !important;
  box-shadow: none;
}

/* Glow quando surge sinal */
@keyframes signalGlow {
  0%   { transform: scale(1);    filter: brightness(1); }
  50%  { transform: scale(1.01); filter: brightness(1.12); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.signal-glow{
  animation: signalGlow 650ms ease-out 1;
}

/* Piscar quando score > 80 */
@keyframes scoreBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.score-blink{
  animation: scoreBlink 900ms ease-in-out infinite;
}

.score-hot{
  color: #eaffff !important;
  text-shadow: 0 0 18px rgba(34,211,238,.45);
}