body {
  background-color: #000000;
  color: #ffffff;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

.beacon-btn {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 4px solid #334155;
  background: #1e293b;
  color: #94a3b8;
  font-size: 1.5rem;
  cursor: pointer;
  transition: all 0.4s ease; 
  box-shadow: 0 0 0 rgba(0,0,0,0); 
}

.beacon-btn.active {
  background: #ffffff;
  color: #0f172a;
  border-color: #ffffff;
  box-shadow: 0 0 30px #ffffff, 0 0 60px #3b82f6; 
  transform: scale(1.05);
}

.status-text {
  margin-top: 40px;
  font-size: 1.2rem;
  color: #94a3b8;
  text-align: center;
}

 .count {
  color: #60a5fa;
  font-weight: bold;
  font-size: 1.5rem;
}

.stopwatch {
    font-family: 'Courier New', monospace;
    font-size: 2rem;
    margin-top: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #5fa7ff;
}

.stopwatch.active {
    opacity: 1;
}