body {
  background-color: #2b2b2b;
}

/* Cards */
.card {
  border-radius: 1rem;
  transition: transform 0.2s ease;
}

/* Only cards with the 'interactive' class scale on hover (prevents non-clickable cards from appearing interactive) */
.card.interactive:hover {
  transform: scale(1.03);
  cursor: pointer;
}

/* Pomodoro card specific layout improvements */
.pomodoro-card .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.pomodoro-card input#studyTime {
  max-width: 220px;
}
.pomodoro-card .btn {
  min-width: 80px;
  margin: 0 0.25rem;
}
.pomodoro-card #pomodoroPlan {
  text-align: center;
  min-height: 2rem;
}

/* Relógio base */
.clock {
  position: relative;
  aspect-ratio: 1/1;
  width: 150px;
  border: 5px solid #43c020;
  border-radius: 50%;
  margin: 0 auto;
  background: white;
}

/* Ponteiros (proporcionais e centrados) */
.clock::before,
.clock::after,
.clock div::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform-origin: bottom center;
  background: #ff8c00;
}

.clock::before { /* Hora */
  width: 4px;
  height: 25%;
  transform: rotate(var(--hour, 0deg));
}
.clock::after { /* Minuto */
  width: 3px;
  height: 35%;
  transform: rotate(var(--min, 0deg));
}
.clock div::before { /* Segundo */
  width: 2px;
  height: 45%;
  transform: rotate(var(--sec, 0deg));
  background: #ff8c00;
}

/* Centro */
.clock div {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #ff8c00;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Versão ampliada */
.clock.large {
  width: 300px;
  border-width: 8px;
}