.option-tile {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 12px;
  padding: 20px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}

.option-tile:hover {
  background: rgba(30, 41, 59, 0.9);
  border-color: rgba(99, 102, 241, 0.55);
}

.option-tile.active {
  background: rgba(13, 48, 105, 0.9);
  border-color: rgba(99, 102, 241, 0.55);
}

.option-icon {
  font-size: 30px;
  color: rgb(129, 140, 248); /* indigo-400 */
  margin-bottom: 8px;
}

.option-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: rgb(226, 232, 240);
}

.option-desc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: rgb(148, 163, 184);
}