body {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  background-color: #121212;
  color: #e0e0e0;
}

/* Container fixed bottom-right with padding */
#usage-time-container {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 150px;
  user-select: none;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Circular timer wrapper */
.circle-timer {
  position: relative;
  width: 150px;
  height: 150px;
  background-color: transparent;
  border-radius: 50%;
  box-shadow:
    inset 0 0 15px rgba(124, 58, 237, 0.6),
    0 8px 24px rgba(124, 58, 237, 0.4);
}

/* SVG circle ring styling */
svg {
  transform: rotate(-90deg);
  width: 150px;
  height: 150px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}

circle.bg-ring {
  fill: none;
  stroke: #2c2a38;
  stroke-width: 12;
}

circle.progress-ring {
  fill: none;
  stroke: #8b5cf6;
  stroke-width: 12;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.3s ease;
  filter: drop-shadow(0 0 6px rgba(122, 70, 201, 0.7));
  animation: strokeSmoothBlink 15s ease-in-out infinite;
}

/* Center usage time text */
/* Adjusted transform to center vertically inside circle */
#usage-time-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 700;
  font-size: 1.45rem;
  line-height: 1.15;
  color: #22c55e; /* Light green */
  user-select: text;
  text-align: center;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
  text-shadow: 0 0 6px rgba(34, 197, 94, 0.8);
  max-width: 90%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

#india-time {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 600;
  font-size: 0.95rem;
  color: #a78bfa;
  text-align: center;
  user-select: none;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: 0.03em;
  text-shadow: 0 0 4px rgba(124, 58, 237, 0.6);
  white-space: nowrap;
}

/* Controls container below circle */
#controls-container {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 24px;
}

button {
  background: transparent;
  border: none;
  color: #a78bfa;
  cursor: pointer;
  font-size: 26px;
  padding: 6px;
  border-radius: 50%;
  transition: background-color 0.3s ease;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

button:hover,
button:focus {
  background-color: #7c3aed;
  color: white;
  outline: none;
}

button:focus-visible {
  outline: 2px solid #c4b5fd;
}

/* Spin animation for swap button */
.spin-animation {
  animation: spin 0.4s ease-in-out;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Smooth stroke & glow color animation with extra colors and stronger glow */
@keyframes strokeSmoothBlink {
  0% {
    stroke: #7a46c9; /* Muted purple */
    filter: drop-shadow(0 0 8px rgba(122, 70, 201, 0.8));
  }
  20% {
    stroke: #22d3ee; /* Teal */
    filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.9));
  }
  40% {
    stroke: #fbbf24; /* Muted yellow */
    filter: drop-shadow(0 0 14px rgba(251, 191, 36, 1));
  }
  60% {
    stroke: #ec4899; /* Pink */
    filter: drop-shadow(0 0 16px rgba(236, 72, 153, 1));
  }
  80% {
    stroke: #bb5a12; /* Muted orange */
    filter: drop-shadow(0 0 18px rgba(187, 90, 18, 1));
  }
  100% {
    stroke: #7a46c9;
    filter: drop-shadow(0 0 8px rgba(122, 70, 201, 0.8));
  }
}